Question

这个问题让我有点烦恼。应该是一个非常简单的解决方案但我无法理解它。我正在做的是通过Jquery创建几个嵌套元素，然后使用JQuery.fade（）方法从页面中删除它。

创建的元素上的关闭按钮不会触发事件，但如果应用于独立按钮，它就会起作用。

使用Javascript：

$( document ).ready(function() {

$("button.create").click(function(){
  // action goes here!!
   // $(".alertBox").fadeIn();
    $('.alerts').append('<div class="alertBox"><span class="hide"><a href="#">X Close</a></span><p><strong>Alert!</strong> Thank you for submitting your comment. Scroll to the bottom of the page to view it.</p></div>');
    return false;
});

$("button.close").click(function(){
  // action goes here!!
    $(".alertBox").fadeOut();
    return false;
});

$(".hide").click(function(){
  // action goes here!!
    alert("check check");
    $(".alertBox").fadeOut();
});

});

HTML：

<h1>Fun with Alert Boxes</h1>
<p>This page is to test the ability to add or remove alert boxes from the DOM. By clicking on the button below, you will make an alert box appear and then you will be able to close the alert box with a button in the top right corner. This will all rely on JQuery to add and remove content from the DOM.<p>

<div class="alerts"></div>

<p>&nbsp;</p>    
<button class="create">Create Alert</button>
<button class="close">Destroy Alert</button>

我有一个小提琴http://jsfiddle.net/coolwebs/5n5nosdc/4/ - 我用Console日志检查了它，看不到任何明显的错误。显然问题在于，因为函数是在元素在页面上可用之前声明的，所以它可能不起作用吗？

更新：通过动态生成脚本进行了一些测试，这证明了我的怀疑。

Answer 1

对动态创建的元素

使用事件委派

$('.alerts').on('click', '.hide', function(){
  // action goes here!!
    alert("check check");
    $(".alertBox").fadeOut();
});

供您参考研究Event Delegation in SO

Answer 2

对动态创建的事件使用事件委派。另外，我想当您点击关闭按钮时，您希望fadeOut该特定alertBox。使用此代码。

$('.alerts').on('click', '.hide', function(){
  // action goes here!!
    alert("check check");
    $(this).closest('.alertBox').fadeOut(); //See this
});

的 Fiddle 的

JQuery事件未触发淡出警告框

2 个答案: