О jQuery append () и как проверить, был ли добавлен элемент

Я сделал очень простой нажмите кнопку обработчик событий, Я хотел бы иметь <p> элемент будет добавлен при нажатии кнопки, вы можете проверить мой код здесь:

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

Я два вопроса прошу:

1, почему моя .append() не работает, как я ожидал (это добавить <p> элемент)

2. в jQuery, как проверить, если элемент уже добавлен? Например, как проверить, если <p id="other"> уже добавлено в моем случае?

-------------------- обновление -------------------------------------------

пожалуйста, проверьте мой обновленный код.

Итак, остается только 2-й вопрос...

7
javascript javascript-events jquery

6 ответов

  1. вы используете mootools, а не jQuery.

  2. чтобы проверить, существует ли ваш элемент

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

поэтому, если вы не хотите добавлять элемент дважды:

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

или, вы можете использовать .one(function)[doc]:

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

1) jsfiddle загружается в MooTools по умолчанию, вам нужно включить jQuery, чтобы это работало. Нет ни одной причины в мире, почему бы этот пример не сработал. (Предполагая, что $ фактически сопоставляется с jQuery объект, то есть.)

2) Вы можете проверить nextSibling of a DOMElement, или используйте next() метод jQuery, например:

if(!$('#something').next().length) {
   //no next sibling.
}
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
});

или 

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

Как проверить, существует ли элемент:

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

ваша скрипка использует Moo tools framework. Измените его, чтобы использовать структуру jquery слева, и он работает. См.http://jsfiddle.net/KxGsj/

1

проверьте, если элемент уже добавлен:

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