À propos de jQuery append() et comment faire pour vérifier si un élément a été ajouté

J'ai fait un très simple event handler, je voudrais avoir <p> élément sera ajouté lorsque le bouton est cliqué, vous pouvez vérifier mon code ici:

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

J'ai deux questions demander:

1, pourquoi mon .append() ne fonctionne pas comme je m'y attendais (c'est ajouter la <p> élément)

2. en jQuery, comment faire pour vérifier si un élément est déjà ajouté? Par exemple comment vérifier si <p id="other"> a déjà ajouté dans mon cas?

-------------------- mise à jour -------------------------------------------

Veuillez vérifier mon code mis à jour ici.

Donc, seule la 2ème question demeure...

jsfiddle par défaut de chargement de MooTools. J'oublie souvent de le changer, aussi.
Fermeture automatique des balises de ne pas manipuler ajout de la fonction. Bien que vous pouvez faire avec .next()

OriginalL'auteur Mellon | 2011-10-31

  1. 27

    1. Vous êtes en utilisant mootools et pas jQuery.

    2. Pour vérifier si un élément existe

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

    Donc, si vous ne voulez pas ajouter l'élément à deux reprises:

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

    Ou, vous pouvez utiliser le .one(function)[doc]:

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

    OriginalL'auteur Samuel Liew

  2. 4

    1) jsFiddle charges dans MooTools par défaut, vous devez inclure jQuery pour que cela fonctionne. Il n'est pas une raison dans le monde du pourquoi de cet exemple ne fonctionne pas. (En supposant que le $ est en fait associé à la jQuery objet, c'est-à.)

    2) Vous pouvez vérifier le nextSibling d'un DOMElement, ou utiliser le next() méthode jQuery, comme suit:

    if(!$('#something').next().length) {
   //no next sibling.
}
    Des précisions sur 1: le violon n'est pas le chargement de la bibliothèque jQuery, mais le framework mootools. Celui-ci fonctionne: jsfiddle.net/j36ye/16

    OriginalL'auteur Jacob Relkin

  3. 2

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

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

    Ou 

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

    OriginalL'auteur Marco Johannesen

  4. 2

    Comment vérifier si un élément existe:

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

    OriginalL'auteur Tom

  5. 1

    Votre violon est l'aide de l'moo outils de cadre. Modifier pour utiliser le framework jquery sur la gauche et il fonctionne. Voir http://jsfiddle.net/KxGsj/

    OriginalL'auteur Moin Zaman

  6. 1

    vérifier si l'élément est déjà ajouté:

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

    OriginalL'auteur