Question

我正在创建一个动态菜单，我可以在其中添加和删除新表单。

<input type="button" value="generate form" id="test"/>
<div id="form1"></div>

<script>
$(document).ready(function() {
    $("#test").click(function() {    
        $("#form1").append("<select id='score-attempt'><option value='penalty'>penalty</option></select><input type='button' value='remove' id='remove'/><br>");
    }); 

    $("#form1 #remove").click(function() {    
        alert($(this).index());
    });
});

问题是点击删除永远不会触发警告框。

由于

Answer 1

问题是该元素稍后添加，并且在加载dom时不存在。因此，必须从已存在的元素委托click事件，例如，像这样：

$(document).on("click", "#remove", function(){
  alert($(this).index() );
});

而不是$(document)每个其他静态父元素都可以用于事件委托，就像示例一样。

评论更新：如上所述，$(document)仅作为示例。我也喜欢在这里使用$（＆＃34;＃form1＆＃34;），就像mithunsatheesh建议的那样。

供参考：https://api.jquery.com/on/#on-events-selector-data-handler，部分＆＃34;直接和委派活动＆＃34;：

＆＃34;事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）的页面上。＆＃34;

更新正确的索引：您将使用例如索引获取正确的索引

$("#form1").on("click", ".remove", function(){    
    alert($(".remove").index($(this)));
});

调整为使用remove作为类而不是id作为删除按钮。 ID必须是唯一的，因此类是更好的解决方案。 index()从0开始计数，因此第一个得到0。

作为工作示例：Fiddle

Answer 2

您需要使用#remove。

在#form1输入上添加事件处理程序

查看here，here和here。

以下是您的工作jsfiddle。

.click（）不处理特定索引

2 个答案: