Binden Sie einen Klick an eine dynamische Schaltfläche mit jQuery?

Question

Ich möchte eine Schaltfläche erstellen, die einen jQuery-Klick auf die Fly hat. Nachdem der Benutzer fertig ist und auf die Schaltfläche klicke, möchte ich die Schaltfläche und den jQuery-Klick solange zerstören, bis ich sie neu erstellt habe.

Ich bin mir nicht sicher, wie man das in jQuery macht. Ich weiß jQuery.live ist eine Option, aber ich bin mir nicht sicher, ob dies besser oder schlechter wäre als die Art, wie ich es tun möchte.

Answer 1

Live würde gut funktionieren. Wenn Sie die Verwendung von Live vermeiden möchten, können Sie die neue Schaltfläche anschließen, während Sie sie dem DOM hinzufügen.

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

Mit Live es wird daraus:

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

Dies sollte funktionieren. Ändern html in Strings entsprechend:

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

hier ein demo site ist es in Aktion zeigt.

Answer 3

Es tut mir leid, um es zu einem so alten und beantwortete Frage. Ich hatte ein ähnliches Problem und diese Antwort half mir, brachte mich aber nicht ganz dahin. Nach Versuch und Irrtum ... Hier ist meine praktische Lösung, um Bereiche zur Webseite hinzuzufügen und sie zu entfernen. Ich benutze es mit dynamischen Formularfeldern, aber Ihre Bedürfnisse können variieren.

Hier ist ein Teil des Formulars im statischen Teil der Seite.

<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> 

Dann brauchen wir ein paar JavaScript-Funktionen. Diese benutzen 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> 

Hoffentlich hilft das jemand und ich habe nichts vergessen.