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意味着。页面加载后。

Answer 2

经过一些测试后，在我看来，“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函数中对此函数进行decalare

$(function(){

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

Answer 3

我也受此影响，发现 on 仅适用于jquery 1.7及以上版本。我在jquery 1.4.1上，在上没有版本。升级jquery是我想避免的。

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

jQuery单击动态元素

3 个答案:

注意

为什么需要这个