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。

---

为什么你需要这个

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

Answer 2

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

第一个解决方案是在“包装”中移动对象之前分配事件“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 是我想要避免的。

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