Tiếp cận được một yếu tố jquery vừa được nối vào DOM

Question

Tôi chỉ đơn giản là gắn thêm một yếu tố đó là trên DOM như:

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

Ngay sau khi tôi gắn nó tôi cần truy cập vào phần tử Tôi chỉ cần thực hiện để liên kết chức năng nhấp với nó, tôi đã thử:

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

Nhưng những điều trên không hiệu quả. Tôi có thể xác định duy nhất yếu tố này nhưng điều đó có vẻ giống như một chút để làm việc nhiều khi có lẽ có một cách để tôi có thể lấy yếu tố ngay sau khi tôi thêm nó vào.

Answer 1

Bạn có thể làm điều này:

var el = $('<a href="#">test</a>'); 

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

el.click(function(){alert("test")}); 

// or preferrably: 
el.on('click', function(){alert("test")}); 

Chức năng append chấp nhận hai loại đối số: một chuỗi hoặc một yếu tố jQuery. Trong trường hợp một chuỗi được truyền vào, nó sẽ tạo ra một phần tử jQuery bên trong và nối nó vào phần tử cha.

Trong trường hợp này, bạn muốn tự truy cập vào phần tử jQuery, vì vậy bạn có thể đính kèm trình xử lý sự kiện. Vì vậy, thay vì truyền vào chuỗi và để jQuery tạo một phần tử, bạn phải tạo phần tử đầu tiên và sau đó chuyển nó vào hàm chắp thêm.

Sau khi bạn đã thực hiện điều đó, bạn vẫn có quyền truy cập vào phần tử jQuery để có thể đính kèm trình xử lý.

Answer 2

Add sắc để element mà sau đó sử dụng nó như sau

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


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

Answer 3

Tại sao không tiết kiệm một tham chiếu đến các yếu tố mới trước khi bạn nối nó:

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

Answer 4

Yếu tố cuối cùng sẽ là yếu tố mới

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

Answer 5

Bạn có thể đính kèm sự kiện vào phần tử khi bạn tạo ra nó -

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

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


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

Answer 6

Chỉ cần đính kèm trình xử lý nhấp vào neo Trước khi bạn thêm vào.

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

Answer 7

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

http://jsfiddle.net/33jX4/