javascript - jQuery 点击动态元素

Question

查看代码注释:

$.each($('input[type="radio"]'), function(){
    var input = $(this);
    var container = $('<div class="radio"></div>');
    var mark = $('<span />');

    input.wrap(container).after(mark);

    container.click(function(){
        alert('test'); // Not triggered.
    });
});

html 是:

<input type="radio" value="female" name="gender" />

任何人都知道为什么单击时不触发警报，是的，它在 CSS 中可见。当我使用时:

console.log(container);

它确实给了我它包含的 HTML。

谢谢

Answer 1

$('body').on('click', 'div.radio', function() {

});

完整代码

$('body').on('click', 'div.radio', function() {
  alert('test'); 
});

$.each($('input[type="radio"]'), function(){
    var input = $(this);
    var container = $('<div class="radio"></div>');
    var mark = $('<span />');

    input.wrap(container).after(mark);
});

---

注意

代替 body，您应该使用 static-element，它是 container 的容器。

---

为什么需要这个

您需要委托(delegate)事件处理程序，因为这意味着您的元素会动态添加到 DOM。页面加载后。