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

Question

我只是在 DOM 上附加一个元素，例如：

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

在我附加它之后，我需要访问我刚刚制作的元素以便将点击功能绑定到它，我尝试了：

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

但以上没有奏效。我可以唯一地标识元素，但是当我可能有一种方法可以在添加元素后立即获取元素时，这似乎有点工作。

Answer 1

你可以这样做：

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 创建一个元素。

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

Answer 2

var $a = $('<a />', {href:"#"})
  .text("test")
  .on('click', function(e) { 
     alert('Hello') 
  })
  .appendTo('#div_element');

http://jsfiddle.net/33jX4/

Answer 3

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

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

Answer 4

最后一个元素将是新元素

$('a:last','#div_element').on('click',function(){
    // do something
});

Answer 5

向其中添加身份，element然后按如下方式使用它

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


$('#tester').on('click', function(event) {
console.log('tester clicked');
});

Answer 6

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

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

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


$("#div_element").append(ele);

Answer 7

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

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