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

经过一些测试后，在我看来，“包装”克隆你作为参数传递的对象，或者对该对象的引用丢失了，但我不是很确定。

第一种解决方案是在"wrap“中移动对象之前分配事件"onclick”。

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

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

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

简化版：

$.each($('input[type="radio"]'), function(){

    var wrapper = $('<div class="radio"></div>').click(function(){
        alert('test'); // triggered now.
    });

     $(this).wrap(wrapper).after($('<span />'));
});

不要忘记在onload函数中取消对此函数的引用

$(function(){

   // your code here ....
});

Answer 2

$('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);
});

备注

您应该使用作为container容器的static-element，而不是body。

为什么你需要这个

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

Answer 3

我也受此影响，发现上的只有在jQuery1.7和更高版本中才可用。我使用的是jquery 1.4.1，而上的在版本中不可用。升级jquery是我想要避免的事情。

谢天谢地，delegate在那里，它解决了问题。