jQuery chắp thêm bên trong phần tử

Question

Tôi có mã jQuery sau hoạt động, nhưng nó làm cho tôi suy nghĩ xem có thể thực hiện một hành động chắp thêm vào những gì đã được thêm vào mà không cần chỉ định những gì tôi muốn thêm vào. append().append() không thực hiện thủ thuật, nó chỉ đặt hai phần tử cạnh nhau và không phải là con của hành động append() đầu tiên.

trình:

var container = $('#container'), 
    child = 'child'; 

$('#container').append($('<div/>',{ 
    'id' : 'child' 
})); 

$('#' + child).append($('<a/>', { 
    'class' : 'close', 
    'href' : 'javascript:;', 
    html : 'close', 
    click : function(e){ 
     e.preventDefault(); 
     $('#' + child).remove(); 
    } 
})); 

không hoạt động:

var container = $('#container'), 
    child = 'child'; 

$('#container').append($('<div/>',{ 
    'id' : 'child' 
})).append($('<a/>', { 
    'class' : 'close', 
    'href' : 'javascript:;', 
    html : 'close', 
    click : function(e){ 
     e.preventDefault(); 
     $('#' + child).remove(); 
    } 
})); 

http://jsfiddle.net/Y8TwW/1/

Answer 1

Bạn có thể sử dụng .appendTo() để phụ thêm <div> đầu tiên đến phần tử với thùng chứa ID, nên bạn chỉ còn một tham chiếu đến mà yếu tố mới, sau đó sử dụng .append():

$('<div/>',{ 
    'id' : 'child' 
}).appendTo('#container').append(
    $('<a/>', { 
     'class' : 'close', 
     'href' : 'javascript:;', 
     html : 'close', 
     click : function(e){ 
      e.preventDefault(); 
      $('#' + child).remove(); 
     } 
    }) 
); 

Answer 2

Tôi muốn sử dụng appendto và sau đó nối http://jsfiddle.net/Y8TwW/2/

var container = $('#container'), 
    child = 'child'; 
$('<div/>', { 'id': child } 
).appendTo(container 
).append($('<a/>', { 
    'class' : 'close', 
    'href' : 'javascript:;', 
    html : 'close', 
    click : function(e){ 
     e.preventDefault(); 
     $('#' + child).remove(); 
    } 
})); 

Answer 3

Vì append không trả lại tham chiếu đến nối Nội dung. Nó đề cập đến cùng một đối tượng tức là container sau lần nối đầu tiên, hoặc cho dù bạn có bao nhiêu phụ thêm. Vì vậy, như sử dụng đề nghị khác appendto hoặc bạn có thể sử dụng những điều sau đây thể hiện rõ hơn lý do tại sao bạn thất bại.

var container = $('#container'), 
    child = 'child'; 

    $('#container').append($('<div/>',{ 
     'id' : 'child' 
     })).find('#' + child).append($('<a/>', { 
     'class' : 'close', 
     'href' : 'javascript:;', 
     html : 'close', 
     click : function(e){ 
      e.preventDefault(); 
      $('#' + child).remove(); 
     } 
    }));​ 

Fiddle http://jsfiddle.net/Y8TwW/3/