给多个动态创建的拥有相同类名的元素添加点击事件

Question

我需要创建一个点击事件，以便在单击动态创建的按钮时，会向相应的复选框添加一个勾选标记。

我有一组动态创建的按钮/复选框，如下所示：

<dd id="parent1"> 
     <a href="#form"><button>Apply Now</button></a>
</dd>

<ul id="parent2">    
    <li>
        <input type="checkbox" name="CAT_Custom_785591"> 
   </li>
</ul>

我还添加了JS代码，以便为每个动态创建的按钮/复选框分配一个相应的类（例如，第一个按钮将被赋予“.job0”类，而第一个复选框也将被赋予“.job0”类，第二个按钮/复选框将是“.job1”，以此类推）。

        //set unique classes for buttons and checkboxes
        var $buttonClass = $("#parent1 a");
        $buttonClass.attr('class', function (index) {
            return 'job' + index;
        });
        var $checkBoxClass = $("#parent2 input");
        $checkBoxClass.attr('class', function (index) {
            return 'job' + index;
        });

我还添加了JS，将单击事件绑定到动态创建的按钮上：

        $(document).on('click', 'a[class^="job"]', function() {
            console.log('element clicked');
        });

什么是确保所有动态创建的按钮都可以被点击并且相应的复选框被选中的最佳方法？（再次说明，当点击类为'.job0'的按钮时，类为'.job0'的复选框被选中，对于每组动态生成的元素也是如此。）

- BobbyDigi

---

你是如何动态创建按钮和复选框的？ - Malcor

Answer 1

我建议在按钮和输入框上设置相同的 data-* 属性，并赋予它们相同的值。

$(document).on('click', 'button[class^="job"]', function() {
  console.log('element clicked');
  var id = $(this).data('id')
  $(`input[data-id=${id}]`).prop('checked', true)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dd id="parent1">
  <a href="#form"><button class="job0" data-id="job0">Apply Now</button></a>
</dd>

<ul id="parent2">
  <li>
    <input class="job0" type="checkbox" name="CAT_Custom_785591" data-id="job0">
  </li>
</ul>

如果您希望通过再次单击按钮来切换选中状态。

$(document).on('click', 'button[class^="job"]', function() {
  console.log('element clicked');
  var id = $(this).data('id')
  var checked = $(`input[data-id=${id}]`).is(':checked')
  $(`input[data-id=${id}]`).prop('checked', !checked)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dd id="parent1">
  <a href="#form"><button class="job0" data-id="job0">Apply Now</button></a>
</dd>

<ul id="parent2">
  <li>
    <input class="job0" type="checkbox" name="CAT_Custom_785591" data-id="job0">
  </li>
</ul>

- Hikarunomemory