jQuery behandelt Ereignisse auf dynamisch hinzugefügten Elementen

Question

Ich habe ein RMA-Formular, das ich Felder dynamisch hinzufügen konnte, aber Probleme damit hatte, Ereignisse (wie klicken, ändern) zu behandeln.

Ich füge die Felder mit dem .appendTo("#container"); hinzu und inkrementiere den NAME-Parameter mit einem Zähler, so dass, wenn der Benutzer Submit trifft - ich bekomme 'Category1: blah' 'Category2: blahblah' 'Category3: something_else ', etc.

Das Problem ist, wenn ich mehr Felder (wie eine Dropdown-Box) dynamisch hinzufügen, folgen die Ereignisse nicht. Ich habe 3 Dropdowns [Kategorie] [Unterkategorie] [Modell]. Wenn ich eine Kategorie auswählen:

jQuery('#cat').bind("change", function() 
    { 
     jQuery('#subcat').empty(); 
     jQuery('#subcat').attr('disabled', 'disabled'); 
     jQuery('#model').empty(); 
     jQuery('#model').attr('disabled', 'disabled'); 

     LoadSeries(jQuery(this).val()); // I do a .removeAttr('disabled'); in here for #subcat 

    }); 

In dem obigen Code, habe ich versucht, das Hinzufügen jQuery('#cat'+counter).bind("change", function() { ... aber ich denke, wird das Ereignis nur Feuer, wenn ich die [Kategorie] ändern und drücken Sie gleichzeitig auf die Schaltfläche Hinzufügen.

Ich versuchte .live verwenden, aber ich bin mir nicht sicher, wie es mit zusätzlichen Elementen mit unterschiedlichen Klasse/name-Parameter (cat2, cat3, cat4, CAT5 ...)

Würde ich brauche getrennt zur Arbeit kommen funktioniert auch? (LoadSeries2, LoadSeries3 usw.) für die Anzahl der Felder, die hinzugefügt werden?

Alle Vorschläge geschätzt.

BEARBEITEN: Ein Teil des HTML-Codes zum Anzeigen von Optionsschaltflächen oberhalb der Dropdown-Listen [Kategorie] [Unterkategorie] [Modell]. Dies ist für den Benutzer, um auszuwählen, ob es eine Rückgabe oder ein Austausch sein wird.

newTextBoxDiv.after().html(' 
    <div class="item'+counter+'"><br/> 
    <table width="820" border=1 cellspacing="0" cellpadding="0" align="center" style="border: 1px; border-color: #000;"> 
     <tr> 
     <td> 
      <div align="center" style="font-size: 14px;"> 
      <input type="radio" class="radioBtn'+counter+'" name="Return_Exchange'+counter+'" value="Return" selected="selected">Return 
      <input type="radio" class="radioBtn'+counter+'" name="Return_Exchange'+counter+'" value="Exchange">Exchange</div> 
... 

Answer 1

können Sie die live() Methode oder in Ihrem Fall verwenden die delegate() Methode könnte am besten sein. In Kombination mit dem starts-with selector (^=) Sie sollte gut sein zu gehen ...

$("#container").delegate("[id^='cat']", "change", function() { 
    $("#subcat, #model").empty().attr("disabled", true); 
    LoadSeries($(this).val()); 
}); 

---

jQuery on mit

$("#container").on("change", "[id^='cat']", function() { 
    $("#subcat, #model").empty().attr("disabled", true); 
    LoadSeries($(this).val()); 
}); 

Answer 2

Ich würde für Geräte, die speziell eine zusätzliche Klasse verwenden, die sein müssen an dieses Ereignis gebunden, etc ...

<input class="cat3 eventClass" /> 

Dann nur wir e .live() alle bestehenden oder zukünftigen $('.eventClass') Elemente der Veranstaltung

Answer 3

binden Sie eine beginnt mit Wahl zusammen mit Live- Versuchen Sie diese verwenden können:

jQuery('[id^=cat]').live("change", function() 
{ 
    var $this = $(this); 
    var id = this.id.replace(/[^0-9]/, ""); 
    jQuery('#subcat' + id).empty(); 
    jQuery('#subcat' + id).attr('disabled', 'disabled'); 
    jQuery('#model' + id).empty(); 
    jQuery('#model' + id).attr('disabled', 'disabled'); 
    LoadSeries(jQuery(this).val()); // I do a .removeAttr('disabled'); in here for #subcat  
});