jquery - .hide() 不会影响动态创建的元素

Question

这是我的代码：

<script>
$('#closeDiv').hide();
    $('#addDiv').click(function (){
    var $newdiv1 = $('<div id="main_content4"><br /><button class="close">Close this</button></p><p>Ajoutez une div avec jQuery. Cacher le bouton qui permet de l\'ajouter, ensuite ajoutez un bouton dans la nouvelle div pour la fermer à son tour. Pour finir on affiche à nouveau le bouton pour afficher la div.</p></div>'),
     existingdiv1 = document.getElementById('main_content3');

     $('#main').append($newdiv1);
     $('#addDiv').hide();
     $('#closeDiv').show();
});

$('#closeDiv').click(function()  { 
    $('#main_content4').remove();
    $('#addDiv').show();
    $('#closeDiv').hide();
});
</script>

正如您在我的var $newdiv1I create this button 中看到的：

<button class="close">Close this</button>

但是当我添加这个时，它不起作用：

$('#close').click(function()  { 
    $('#main_content4').remove();
});

我的代码有什么问题？

Answer 1

使用委托：

$('#main').on('click','.close',function()  { 
    $('#main_content4').remove();
});

但是等等，也许不需要延迟，只是你的选择器错了：

$('.close').click(function()  { 
    $('#main_content4').remove();
});

Answer 2

您的代码试图在创建元素之前附加事件。要将事件附加到新创建的元素，您需要直接将其附加到创建它的相同位置，或者使用像 jQuery 这样的侦听器.on。