jQuery .on在动态生成的元素上仅触发一次

Question

So I have the following problem. 所以我有以下问题。 I am trying to add a two events to a table of checkboxes. 我试图将两个事件添加到复选框表。

Here's an example of the html. 这是html的示例。

<body>
<div id='container'> //static element, everything beyond this element is dynamic
 <div id='pane_x'>
  <div id='bottom_x'>
   <div id='bottom_left_x'>
    <div id='results_x'>
     <div id='list_x'>
      <div id='table_1'>
       <table>
        <tbody>
         <tr>
          <td>
           <input type='checkbox' name='blah' id='blah_obj.id_x' class='blahblah'>
          </td>
         </tr>
        </tbody>
       </table>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

I am trying to select the checkboxes only hopefully by using a prefix selector [id^='blah_']. 我试图只希望通过使用前缀选择器[id ^ ='blah_']来选中复选框。 I am able to get the code working for the first pane ie: pane_0, but it doesn't fire on pane_1 or beyond. 我能够使代码适用于第一个窗格，即：pane_0，但是它不会在pane_1或更高版本上触发。

jquery(document).on("change", "[id^='blah_" + obj.id + "']", function() {
//code here
});

There may be nesting errors as I just made an approximate estimate of the html. 由于我只是对html进行了近似估算，因此可能会有嵌套错误。 The weird thing is I can see them by using a daisy chained .children() statement, but I can't select the input elements. 奇怪的是，我可以使用菊花链式.children（）语句查看它们，但无法选择输入元素。

Since the comments don't support the same code blocks as this section I'll just add it here: 由于注释不支持与本节相同的代码块，因此仅在此处添加：

jquery(document).on("change", ".checked", function() {
 var ids = jquery(this).attr("id").split("_");
 if (ids[0] === "blah")
  //do code
 }
});

edited the id for clarity. 为了清楚起见，编辑了ID。 The id structure is "blah_" obj.id "_" individual iterator. id结构是“ blah_” obj.id“ _”单个迭代器。 So 3 checkboxes on pane 0 would look like this: blah_0_0 blah_0_1 blah_0_2 因此，窗格0上的3个复选框如下所示：blah_0_0 blah_0_1 blah_0_2

there are 2 other sets of checkbox lists on this page that I do not want to target with these functions, that is why i'm using the prefix selector. 此页面上还有其他两组复选框列表，我不想使用这些功能作为目标，这就是为什么我使用前缀选择器。

Answer 1

The point of using startsWith selector is not to try to complete the whole value as you are doing with obj.id if obj.id is even defined. 使用点startsWith选择是不是要设法完成整个价值你用做obj.id如果obj.id甚至定义。

Following would find all input with ID's starting with 'blah_' either existing or in the future. 接下来将查找所有以'blah_'开头的ID的现有或将来的所有input 。

jQuery(document).on("change", "input[id^='blah_']", function() {
//code here
});

Using the class as selector makes even more sense if they all share a common class 如果它们都共享一个共同的类，则将类用作选择器更有意义。

jQuery(document).on("change", "input.blahblah", function() {
//code here
});

Also note you have typo in jquery should be jQuery unless you have defined it otherwise in your own code 还要注意，除非您在自己的代码中定义了错字，否则jquery错字应该是jQuery

Important note ID's may not be repeated in a page, in case you have been repeating the same checkbox ID. 如果您一直在重复相同的复选框ID，则重要提示 ID可能不会在页面中重复。 They must be unique by definition 根据定义，它们必须是唯一的

Answer 2

here another sample : 这是另一个示例：

$("body").on({
    click:function(){
        // where $(this) is the current item changed
    }
}, "input.blahblah");

jQuery .on在动态生成的元素上仅触发一次

问题描述

2 个解决方案

解决方案1
1 2012-12-16 20:58:38

解决方案2
0 2012-12-16 21:07:42

jQuery .on在动态生成的元素上仅触发一次

问题描述

2 个解决方案

解决方案1 1 2012-12-16 20:58:38

解决方案2 0 2012-12-16 21:07:42

解决方案1
1 2012-12-16 20:58:38

解决方案2
0 2012-12-16 21:07:42