Về jQuery append() và làm thế nào để kiểm tra xem một yếu tố đã được nối

Question

tôi đã thực hiện một nút rất đơn giản sự kiện click handler, tôi muốn có <p> yếu tố được nối khi nút bấm, bạn có thể kiểm tra my code here:

<div id="wrapper"> 
    <input id="search_btn" value="Search" type="button"> 
</div> 

$("#search_btn").click(function(){ 
    $("#wrapper").append("<p id='other'>I am here</p>"); 
}); 

tôi có hai câu hỏi hỏi:

1, lý do tại sao tôi .append() không hoạt động như mong đợi của tôi (đó là thêm các yếu tố <p>)

2. trong jQuery, làm thế nào để kiểm tra xem một số yếu tố đã được nối? Ví dụ cách kiểm tra xem <p id="other"> đã được thêm vào trong trường hợp của tôi chưa?

-------------------- update ------------------------ -------------------

Vui lòng kiểm tra my updated code here.

Vì vậy, chỉ có câu hỏi thứ 2 vẫn ...

Answer 1

1. Bạn đang sử dụng mootools chứ không phải jQuery.

2. Để kiểm tra xem phần tử của bạn tồn tại

if($('#other').length > 0)

Vì vậy, nếu bạn không muốn để thêm phần tử hai lần:

$("#search_btn").click(function() { 
    if($('#other').length == 0) { 
     $("#wrapper").append("<p id='other'>I am here</p>"); 
    } 
}); 

Hoặc, bạn có thể sử dụng .one(function) [ doc]:

$("#search_btn").one('click', function() { 
    $("#wrapper").append("<p id='other'>I am here</p>"); 
}); 

Answer 2

1) jsFiddle tải trong MooTools theo mặc định, bạn cần phải bao gồm jQuery để làm việc này. Không có lý do nào trên thế giới tại sao ví dụ đó không hiệu quả. (Giả sử rằng các $ thực sự là ánh xạ tới các đối tượng jQuery, đó là.)

2) Bạn có thể kiểm tra nextSibling của một DOMElement, hoặc sử dụng các phương pháp next() jQuery, như vậy:

if(!$('#something').next().length) { 
    //no next sibling. 
} 

Answer 3

Fiddle của bạn đang sử dụng khung công cụ moo. Thay đổi nó để sử dụng khung công tác jquery bên trái và nó hoạt động.Xem http://jsfiddle.net/KxGsj/

Answer 4

http://jsfiddle.net/j36ye/17/

$("#search_btn").click(function(){ 
    if(($('#other').length) == 0) { 
     $("#wrapper").append("<p id='other'>I am here</p>"); 
    } 
    return false 
}); 

Hoặc

var other_appended = false; 

$("#search_btn").click(function(){ 
    if(other_appended == false) { 
     $("#wrapper").append("<p id='other'>I am here</p>"); 
      other_appended = true; 
    } 
    return false; 
}); 

Answer 5

Làm thế nào để kiểm tra xem một yếu tố tồn tại:

if($("p#other").length > 0) { 
    // a p element with id "other" exists 
} 
else { 
    // a p element with id "other" does not exist 
} 

Answer 6

kiểm tra nếu yếu tố đã được nối:

alert($(this).parent().length?'appended':'not appended');