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

Question

Я сделал очень простой обработчик события нажатия кнопки , я хотел бы, чтобы при нажатии кнопки добавлялся элемент <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"> в моем случае?

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

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

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

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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

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

Или

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

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

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

Answer 6

Ваша скрипка использует фреймворк moo tools. Измените его, чтобы использовать JQuery Framework слева, и он работает. Смотри http://jsfiddle.net/KxGsj/