操纵jQuery添加的元素

时间:2014-05-10 20:53:27

标签: javascript jquery

我正在动态地向DOM添加一些元素。

我想用jQuery的.click()函数来操作这些元素。但不知何故,DOM没有为动态添加的元素触发.click()事件,它只适用于jQuery未添加的其他元素。

知道为什么吗?

3 个答案:

答案 0 :(得分:2)

这是一个简单的事件委托案例,意味着对页面上动态添加的元素的直接事件绑定不会在您的案例中得到事件click,因此您需要遵循特定的事件委托语法,如:

$(staticParent).on(event, selector, callback);

这里staticParent是最接近的父项,它保存动态添加的元素,可以是div, table, form etc.事件就像click这样的事件,selector是元素的类名或id上下文和回调是事件发生时必须运行的函数。

虽然$(document)始终可用于委派活动。所以你可以这样做:

$(document).on('click', '.myElem', function(){
    alert('clicked.');
});

答案 1 :(得分:1)

Ad Jai已经说过你需要活动授权。在jQuery中,可以使用:  http://api.jquery.com/on/  我为你写了这个小例子:

$(document).on("click", "input[type='button']", function() {
    alert("clicked");
});

// add two buttons 
$("<input/>", {
    type: "button",
    value: "button"
}).appendTo("#buttonsHolder");

$("<input/>", {
   type: "button",
   value: "button"    
}).appendTo("#buttonsHolder");

这是工作jsFiddle: http://jsfiddle.net/zono/DXqWe/

答案 2 :(得分:0)

根据我的经验,您需要在动态添加元素后添加点击处理程序。如果在动态添加元素之前将click函数绑定到元素,则新元素将不具有click函数。