访问刚刚附加到 DOM 的 jquery 元素
Posted
技术标签:
【中文标题】访问刚刚附加到 DOM 的 jquery 元素【英文标题】:Getting access to a jquery element that was just appended to the DOM 【发布时间】:2013-04-13 00:04:30 【问题描述】:我只是在 DOM 上附加一个元素,例如:
$("#div_element").append('<a href="#">test</a>');
在我添加它之后,我需要访问我刚刚创建的元素以便将点击功能绑定到它,我尝试了:
$("#div_element").append('<a href="#">test</a>').click(function()alert("test"));
但是上面没有工作。我可以唯一地标识元素,但是当我可能有一种方法可以在添加元素后立即获取元素时,这似乎有点繁琐。
【问题讨论】:
在附加之前附加点击处理程序。 How can I get a reference to a node directly after it is appended? 和 Access Elements After Append 的可能重复项。 【参考方案1】:为element
添加身份,然后按如下方式使用它
$("#div_element").append('<a id="tester" href="#">test</a>');
$('#tester').on('click', function(event)
console.log('tester clicked');
);
【讨论】:
这个答案可能对OP没有用,因为这对他来说不方便。 OP 在他的问题中写道。【参考方案2】:你可以这样做:
var el = $('<a href="#">test</a>');
$("#div_element").append(el);
el.click(function()alert("test"));
// or preferrably:
el.on('click', function()alert("test"));
append 函数接受两种类型的参数:字符串或 jQuery 元素。 如果传入一个字符串,它将在内部创建一个 jQuery 元素并将其附加到父元素。
在这种情况下,您希望自己访问 jQuery 元素,因此您可以附加事件处理程序。因此,与其传入字符串并让 jQuery 创建元素,不如先创建元素,然后将其传递给 append-function。
完成此操作后,您仍然可以访问 jQuery 元素以附加处理程序。
【讨论】:
虽然我确实认为.on
是最好的方法,但您实际上回答了这个问题!干得好!
那么,在附加之前将 $() 放在字符串周围的答案是什么?这里的推理和故事是什么?【参考方案3】:
为什么不在添加新元素之前保存对它的引用:
var newElement = $('<a href="#">test</a>');
$("#div_element").append(newElement);
newElement.click(function()alert("test"));
【讨论】:
【参考方案4】:最后一个元素是新元素
$('a:last','#div_element').on('click',function()
// do something
);
【讨论】:
使用选择器 'a:last' 干净整洁【参考方案5】:您可以在创建元素时将事件附加到元素 --
var ele =$("<a href='#'>Link</a>");
ele.on("click",function()
alert("clicked");
);
$("#div_element").append(ele);
【讨论】:
【参考方案6】:在附加之前将点击处理程序附加到锚点。
$("#div_element").append($('<a href="#">test</a>').click(function()alert("test")));
【讨论】:
【参考方案7】:var $a = $('<a />', href:"#")
.text("test")
.on('click', function(e)
alert('Hello')
)
.appendTo('#div_element');
http://jsfiddle.net/33jX4/
【讨论】:
以上是关于访问刚刚附加到 DOM 的 jquery 元素的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Jquery 或 Javascript 定位附加元素,或者如何将该附加元素添加到 DOM?