訪問剛剛附加到DOM的jquery元素

Question

我只是添加一個DOM上的元素，如：

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

在我追加它之后，我需要訪問我剛剛創建的元素以便將click函數綁定到它，我試過：

$("#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創建元素，而是必須先創建元素，然后將其傳遞給append-function。

完成后，您仍然可以訪問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

向該element添加標識，然后按如下方式使用它

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


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

Answer 5

最后一個元素是新元素

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

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")}));