Lier un clic sur un bouton dynamique avec jQuery?

Question

Je veux créer un bouton qui a un clic jQuery à la volée. Une fois que l'utilisateur a terminé et appuyé sur le bouton, je veux détruire le bouton et le clic jQuery jusqu'à ce que j'en ai besoin recréé.

Je ne suis pas sûr de savoir comment faire cela dans jQuery. Je sais que jQuery.live est une option mais je ne suis pas sûr si ce serait mieux ou pire alors la façon dont je veux le faire.

Answer 1

Live fonctionnerait très bien. Si vous souhaitez éviter d'utiliser Live, vous pouvez câbler le nouveau bouton lorsque vous l'ajoutez au DOM.

function addNewButton() { 
    $("sweet_selector_here").append("<input type='button' id='sweetness' value='press me, i am awesome' />"); 
    $("#sweetness").click(function() { 
    $(this).remove(); 
    }); 
} 

Avec en direct, il devient ceci:

function addNewButton() { 
    $("sweet_selector_here").append("<input type='button' id='sweetness' value='press me, i am awesome' />"); 
} 

$("#sweetness").live("click", function() { 
    $(this).remove(); 
}); 

Answer 2

Cela devrait fonctionner. Changer html dans les chaînes de façon appropriée:

$('#targetdiv').append($("<div>foobar</div>").click(function(evt) { $(this).remove(); })) 

Voici un demo site montrant en action.

Answer 3

Je suis désolé de poster à un vieux et répondu à la question. J'ai eu un problème similaire et cette réponse m'a aidé mais ne m'a pas tout à fait là. Après essais et erreurs ... Voici ma solution pratique pour ajouter des zones à la page Web et les supprimer. Je l'utilise avec des champs de formulaire dynamiques mais vos besoins peuvent varier.

Voici une partie du formulaire dans la partie statique de la page.

<fieldset> 
    <legend>Email-tauluun</legend> 
    <a class="button_ajax email-add">Add new area</a> 
    <p> 
     <span class="email_original_area"> 
     <label>Email: 
      <input type="text" name="emails[]" id="email0" /> 
     </label> 
     </span> 

     <!--Below we add some more areas--> 
     <span id="email_add_area"></span> 
    </p> 
</fieldset> 

Ensuite, nous avons besoin de fonctions JavaScript. Ceux-ci utilisent jQuery.

<script type="text/javascript"> 

//we need a counter for dynamic fields 
var cnt=0; 

$(document).ready(function(){ 
    $('.email-add').click(function(){ 

    cnt += 1; //let's count... 

    $('#email_add_area').append(
    '<span class="dynExtra"><br /><label>Email: ' + 
    '<input type="text" name="emails[]" id="email' + cnt + '" /></label>' + 
    '</span>' 
); 

    //this function creates a button for newly created area 
    //must be done after the creation of the area 
    addRemover(); 
    }); 
}); 

function addRemover() { 
    //appends remove button to the last created area 
    $('<a class="button_ajax dynExtra-clear" name="dynExtra-clear">Remove area ' + cnt + '</a>').appendTo('#email_add_area'); 

    //remove the clicked button and it's previous sibling 
    $('.dynExtra-clear').click(function(){ 
    $(this).prev().remove(); 
    $(this).remove(); 
    }); 
} 

</script> 

J'espère que cela aide quelqu'un et que je n'ai rien oublié.