jQuery將不會添加元素上工作

Question

HTML：

<fieldset>  
    <select> 
     <option value="">Position</option> 
    </select> 
    <input type="text" /> 
    <select> 
     <option value="">Function</option> 
    </select> 
    <input type="button" class="buttonAnd" value="And" /> 
    <input type="button" class="buttonOr" value="Or" /> 
</fieldset> 

的jQuery：

$(document).ready(function() { 
    field_count = 0; 

    $(".buttonAnd").click(function(){ 
     field_count++; 
     $('fieldset').append(jQuery("<br />")); 
     var new_field = jQuery("<input type=\"button\" />") 
     new_field.attr("class","buttonAnd"); 
     new_field.attr("name","buttonAnd_"+field_count); 
     new_field.attr("value","And_"+field_count); 
     $('fieldset').append(new_field); 
    }); 
}); 

追加新的按鈕，只能在原來的兩個按鈕的工作原理，但它不工作新產生的按鈕。任何想法如何解決這個問題？

Tnx！

Thanx Travis J！我試過你的解決方案，它的工作原理。感謝所有其他人！

Answer 1

jsFiddle Demo

使用事件代表團jQuery's on。這將使你的未來元素，從而讓事件委託給他們

field_count = 0; 

$("body").on("click",".buttonAnd",function(){ 
    field_count++; 
    $('fieldset').append(jQuery("<br />")); 
    var new_field = jQuery("<input type=\"button\" />") 
    new_field.attr("class","buttonAnd"); 
    new_field.attr("name","buttonAnd_"+field_count); 
    new_field.attr("value","And_"+field_count); 
    $('fieldset').append(new_field); 
}); 

Answer 2

你幾乎自己回答你的問題 - 那是因爲.click()事件被分配到的是，目前存在當分配事件的按鈕。如果您還需要它爲新生成的按鈕工作，那麼您必須在創建新按鈕後將事件分配給新按鈕，請注意不要將其再次分配給原始按鈕。

Answer 3

您需要使用.on()，因爲您可以「即時」創建這些新按鈕。所以你需要的是事件授權。 否則腳本不會注意到有新按鈕

請參閱我的fiddle。

$(document).ready(function() { 
    field_count = 0; 

    $(".buttonAnd").on('click', function(){ 
     field_count++; 
     $('fieldset').append(jQuery("<br />")); 
     var new_field = jQuery("<input type=\"button\" />"); 
     new_field.attr("class","buttonAnd"); 
     new_field.attr("name","buttonAnd_"+field_count); 
     new_field.attr("value","And_"+field_count); 
     $('fieldset').append(new_field); 
    }); 
});