javascript-可以访问刚刚附加到DOM的jquery元素

我只是在DOM上附加一个元素,例如:

$("#div_element").append('<a href="#">test</a>');

在我追加它之后,我需要访问我刚刚制作的以便将click函数绑定到它的元素,我尝试过:

$("#div_element").append('<a href="#">test</a>').click(function(){alert("test")});

但是上述方法不起作用。 我可以唯一地标识元素,但是似乎有很多工作要做,当也许有一种方法可以在添加元素后立即得到它。

Greg Alexander asked 2020-02-22T18:34:41Z
7个解决方案
80 votes

你可以这样做:

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函数。

完成之后,您仍然可以访问jQuery元素以附加处理程序。

Kenneth answered 2020-02-22T18:35:12Z
5 votes
var $a = $('<a />', {href:"#"})
  .text("test")
  .on('click', function(e) { 
     alert('Hello') 
  })
  .appendTo('#div_element');

[HTTP://JS fiddle.net/33JX4/]

RafH answered 2020-02-22T18:35:32Z
1 votes

为什么在添加新元素之前不保存对新元素的引用:

var newElement = $('<a href="#">test</a>');
$("#div_element").append(newElement);
newElement.click(function(){alert("test")});  
codebox answered 2020-02-22T18:35:52Z
0 votes

向该element添加身份,然后按以下方式使用它

$("#div_element").append('<a id="tester" href="#">test</a>');


$('#tester').on('click', function(event) {
console.log('tester clicked');
});
Suresh Atta answered 2020-02-22T18:36:12Z
0 votes

最后一个元素将是新元素

$('a:last','#div_element').on('click',function(){
    // do something
});
anpsmn answered 2020-02-22T18:36:32Z
0 votes

您可以在创建事件时将事件附加到元素上-

var ele =$("<a href='#'>Link</a>");

ele.on("click",function(){
    alert("clicked");
});


$("#div_element").append(ele);
SachinGutte answered 2020-02-22T18:36:52Z
0 votes

只需在附加之前将点击处理程序附加到锚点即可。

$("#div_element").append($('<a href="#">test</a>').click(function(){alert("test")}));
Blazemonger answered 2020-02-22T18:37:12Z
translate from https://stackoverflow.com:/questions/16107267/getting-access-to-a-jquery-element-that-was-just-appended-to-the-dom