jQuery處理動態添加元素上的事件

我有一個RMA表單，我可以動態添加字段，但無法處理事件（如點擊，更改）。jQuery處理動態添加元素上的事件

我通過使用.appendTo("#container");並使用計數器遞增NAME參數來添加字段，以便當用戶點擊Submit時 - 我將得到'Category1：blah''Category2：blahblah''Category3：something_else '等。

問題是，當我動態添加更多字段（如下拉框）時，事件不會跟隨。我有3個下拉[類別] [子類別] [模型]。當我選擇一個類別：

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 

    });

在上面的代碼，我嘗試添加jQuery('#cat'+counter).bind("change", function() { ...但我認爲，事件只會火如果我改變【類別】，並同時擊中添加按鈕。

我嘗試使用.live但是我不知道如何得到它與不同類/名稱參數添加元素的工作（CAT2，CAT3，CAT4，CAT5 ...）

我那就需要單獨功能呢？（LoadSeries2，LoadSeries3等）添加的字段數量？

任何建議表示讚賞。

編輯：一些HTML代碼顯示[類別] [子類別] [模型]下拉列表中的單選按鈕。這是爲了讓用戶選擇它將是一個回報還是交換。

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

來源

2011-01-05 mastofact

你能表現出一定的HTML如果可能的話？我知道有很多動態創作正在進行。 – hunter 2011-01-05 19:33:58

@hunter HTML是_extremely_冗長的，但這裏有一些......這是在[category] [子類別] [model]的頂部，供用戶指出它將是返回還是交換。 – mastofact 2011-01-05 19:52:49

可以使用live()方法或你的情況delegate()方法可能是最好的。與starts-with selector（^=）結合你要善於去...

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

jQuery的使用on

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

來源

2011-01-05 19:29:48 hunter

我不知道委託（）！謝謝你的珍聞。 :) – adamjford 2011-01-05 19:49:21

是否有類似的解決方案的當前版本的jQuery，因爲'委託（）'和'live（）'已被分流出門，並且on（）似乎不會將事件綁定到添加的元素在將來。 http://jsfiddle.net/9C4Kb/ – ygesher 2013-10-21 15:59:53

@jegesh使用'on'添加了一個示例。'on'將對將來的元素起作用，因爲它將變化事件應用到'＃容器'元素 – hunter 2013-10-21 18:07:11

我會用一個附加的類專爲將需要的物品綁定到這個事件等...

<input class="cat3 eventClass" />

然後只是我們Ë.live()綁定任何現有或未來$('.eventClass')元素事件

來源

2011-01-05 19:33:47 jondavidjohn

您可以使用選擇器開始一起住試試這個：

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

來源

2011-01-05 19:36:57 Chandu

jQuery處理動態添加元素上的事件

回答

相關問題