Question

我需要创建一个click事件，以便在单击动态创建的按钮时，会在重合的复选框中添加一个复选标记。

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

<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来将click事件绑定到动态创建的按钮：

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

确保可以单击所有动态创建的按钮并检查重合的复选框的最佳方法是什么（再次，当单击带有'.job0'类的按钮时，选中带有'.job0'类的复选框对于每组动态生成的元素，依旧等等？）

Answer 1

我更喜欢将data- *属性设置为按钮并输入彼此重合的相同值。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您希望再次通过点击按钮切换检查状态。

＆＃13;

$(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)
});

＆＃13;

<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>

＆＃13;

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

1 个答案: