Как удалить всплывающий div, добавленный с помощью метода .append() с помощью JQuery?

Я пытаюсь выяснить, как удалить всплывающий элемент div с помощью метода .remove() JQuery. У меня есть div, который добавляется к #main div, когда я нажимаю на элемент с классом «.popUpTrigger». Затем я хотел бы удалить этот добавленный html-код, когда я нажимаю на всплывающее окно.Как удалить всплывающий div, добавленный с помощью метода .append() с помощью JQuery?

Вот мой HTML:

<!DOCTYPE HTML> 
    <html lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html"/> 
    <meta charset="utf-8"/> 
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="jscript.js"></script> 
    <link rel="stylesheet" href="style.css" type="text/css"> 
    <title>Title</title> 
    </head> 
    <body> 
    <div id="main"> 
     <button class="popUpTrigger">Click to trigger the popUp!</button> 
    </div> 
    </body> 
    </html>

Мои jscript.js:

function popUpCreate(idToAppend, popUpCode) { 
     $(function() { 
      $(idToAppend).append(popUpCode); 
     }); 
    } 


    $(function() { 
     $(".popUpTrigger").click(function() { 
     popUpCreate("#main", "<div class='popUpBg'><div class='popUpItSelf'>Hello!</div></div>"); 
     }); 
    }); 

    $(function() { 
    $(".popUpBg").click(function() { 
     $(".popUpBg").remove(); 
     }); 
    });

style.css файл:

 .popUpBg { 
    position:fixed; 
    z-index:999999; 
    top:0; 
    width:100%; 
    height:100%; 
    background:rgba(0,0,0,0.8); 
    cursor:pointer; 
     } 

     .popUpItSelf { 
    position:fixed; 
    z-index:9999999; 
    width:400px; 
    height:200px; 
    text-align:center; 
    top:50%; 
    left:50%; 
    margin-left:-401px; 
    margin-top:-301px; 
    background:white; 
    border: 1px solid black; 
    font-size: 4em; 
    color:black; 
    font-weight:bold; 
    padding:200px; 
     }

Но это не работает, я хочу pop-up, который нужно удалить, когда я нажимаю на .popUpBg (который является всплывающим фоном). Как я могу это достичь?

источник

2014-01-04 tonix

вам необходимо делегировать нажмите событие –

Вы добавляете обработчик при щелчке на объект (фон), который еще не существует.

Во-первых, я переписать свой код, чтобы быть более читаемым

function popUpCreate(idToAppend, popUpCode) { 
    $(idToAppend).append(popUp); 
} 

$(".popUpTrigger").click(function() { 
    popUpCreate("#main", "<div class='popUpBg'><div class='popUpItSelf'>Hello!</div></div>"); 
}); 


$(".popUpBg").click(function() { 
    $(".popUpBg").remove(); 
});

Теперь я делаю коррекцию

function popUpCreate(idToAppend, popUpCode) { 
    $(idToAppend).append(popUp); 
    $(".popUpBg").click(function() { 
     $(".popUpBg").remove(); 
    }); 
} 

$(".popUpTrigger").click(function() { 
    popUpCreate("#main", "<div class='popUpBg'><div class='popUpItSelf'>Hello!</div></div>"); 
});

источник

2014-01-04 19:48:40 farvilain

Итак, с вашим решением обработчик автоматически создается каждый раз, когда вызывается функция popUpCreate(), я прав? – tonix

Да ... не лучший способ, но он работает. – farvilain

Спасибо! Есть только одно. Даже когда я нажимаю на popUpItSelf, всплывающее окно удаляется, как я могу избежать этого? – tonix

Это, чтобы удалить всплывающее окно, нажав на фоне

$('.popUpBg').on('click', function() { 
    $('.popUpItSelf').remove(); 
});

Чтобы удалить как фон и всплывал, просто сделать это.

$('.popUpBg').on('click', function() { 
    $('.popUpItSelf, .popUpBg').remove(); 
});

источник

2014-01-04 19:45:08 CRABOLO

Спасибо за ответ, приведенный выше ответ подходит для меня. – tonix

Как удалить всплывающий div, добавленный с помощью метода .append() с помощью JQuery?

ответ

Смежные вопросы