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 $newdiv1中看到的，我创建了此按钮：

<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之类的侦听器。

.hide（）不会影响动态创建的元素

2 个答案: