Question

我有一个动态生成的表单，根据用户输入呈现字段。我无法将事件直接绑定到动态生成的字段，因为它们在首次呈现DOM时不存在。但是，我可以使用jquery＆＃34; .on＆＃39;通过像document这样的父元素绑定事件的方法。这是因为＆＃34; .on＆＃34;接受一个选择器来选择子元素＆＃34;

.on( events [, selector ] [, data ], handler )

在我的测试中，我可以传入静态选择器并成功绑定事件。

$(document).on('click','#id_task_size_edit',function(){
//     $('#id_task_amount').prop('disabled',false).css("background-color","#FFFACD");

然而问题是每个字段id也是动态生成的，看起来像id_task_size_edit_1，id_task_size_edit_2和id_task_amount_1等。

我认为我可以在选择器中使用通配符来捕获以id_task_size_edit开头的所有事件，如此

$(document).on('click',"'input[id^=id_task_size_edit]'",function(){

然而，这不起作用。我还尝试了[id * = id_task_size_edit]有和没有＆＃34;输入＆＃34;语法和通配符的任何更多组合，但似乎没有任何作用。我丢失的东西或通配符都不能传递给jquerys .on函数的选择器字段。

如何使用动态生成的ID完成动态生成字段的绑定事件？

Answer 1

只需将"'input[id^=id_task_size_edit]'"替换为'[id^="id_task_size_edit"]'即可。下面的工作示例。

$(document).on('click', '[id^="id_task_size_edit"]', function() {
   $(this).text("It is working!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="id_task_size_edit_1" type="button">Click Me</button>

Answer 2

而不是ID，给他们一个共同的class，并在你的JQuery中使用它：

$(document).on('click','.some_common_class_name',function(){

使用.on selector

2 个答案: