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

您需要使用.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);
    });
});

Answer 3

你几乎自己回答了你的问题 - 那是因为.click()事件被分配给分配事件时存在的按钮。如果您还需要它来处理新生成的按钮，那么您必须在创建新按钮后将其分配给新按钮，只需注意不要再次将其分配给原始按钮。