Question

我在我的HTML页面上创建了一个代码，它们有多个复选框，并在js片段中动态创建了一个按钮，用于执行某些事件，但是当我点击按钮执行该操作时，它就会调用该事件片段两次。我想知道如何将事件添加到该按钮。

这是js代码： -

$(".panel-body").on("click", '#select_none', function(event) {
     $("input[name='nodelevel']:checkbox").each(function() {
         this.checked = false;
     });
});

Answer 1

确保只有一个父级.panel-body类名。也许有两个.panel-body，它就会发生这种情况。像这样：

<div class="panel-body">
  ...
  <div class="panel-body">
    ...
      <!-- your selectors -->
  </div>
</div>

尝试stoppropagation以避免第二次父事件侦听器调用：

$(".panel-body").on("click", '#select_none', function(event) {
     event.stopPropagation();
     $("input[name='nodelevel']:checkbox").each(function() {
         this.checked = false;
     });
});

编辑：当然，您可以将监听器添加到document而不是.panel-body：）

Answer 2

示例：

<input class="itemClass" type="checkbox" name="Items" value="Bike"> I have a bike<br>
<input class="itemClass" type="checkbox" name="Items" value="Car" checked> I have a car<br>
<button name="submit" onclick="getValue()" value="Submit">

然后：

    function getValue() {
                var id;
                var name;
                var temp = [];

                $('.itemClass').each(function () {
                    var sThisVal = (this.checked ? $(this).val() : "");
                    console.log(sThisVal);

                    if (this.checked) {
                        // $("input[name=Items]:checked").map(function () {
                        temp.push(sThisVal);
                    }
                });
                console.log(temp);
                $('.itemCheckboxClass').prop('checked', false);
            }

Jquery onclick函数在动态添加的按钮元素

2 个答案: