javascript - 将点击事件添加到具有匹配类的多个动态创建的元素

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”类)。 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 以将点击事件绑定(bind)到动态创建的按钮:

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

确保可以单击所有动态创建的按钮并选中重合复选框的最佳方法是什么(再一次，单击类为“.job0”的按钮时，类为“.job0”的复选框被选中，依此类推每组动态生成的元素)？

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>