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.

为什么你需要这个

您需要委托事件处理程序,因为您的元素动态添加到DOM意味着.页面加载后.