单击函数在具有相同类名的元素上执行多次

Question

我使用了 bootstrap multiselect js 插件，在我的代码中使用之后，我需要为我选择的每个选项添加一个单击事件，以便我绑定单击事件，当我尝试单击选择选项时，该函数执行 2 次. （它应该只执行 1 次）我想知道我的代码中发生了什么，谁能解释一下？

我的代码 HTML：

<div class="select-box">
    <select id="demo1" multiple class="form-control course-list">
        <option value="Javascript">Javascript</option>
        <option value="Python">Python</option>
        <option value="LISP">LISP</option>
        <option value="C++">C++</option>
        <option value="jQuery">jQuery</option>
        <option value="Ruby">Ruby</option>
    </select>
</div>
<div class="select-box">
    <select id="demo2" multiple class="form-control course-list">
        <option value="Javascript">Javascript</option>
        <option value="Python">Python</option>
        <option value="LISP">LISP</option>
        <option value="C++">C++</option>
        <option value="jQuery">jQuery</option>
        <option value="Ruby">Ruby</option>
    </select>
</div>
<div class="select-box">
    <select id="demo3" multiple class="form-control course-list">
        <option value="Javascript">Javascript</option>
        <option value="Python">Python</option>
        <option value="LISP">LISP</option>
        <option value="C++">C++</option>
        <option value="jQuery">jQuery</option>
        <option value="Ruby">Ruby</option>
    </select>
</div>

我的代码JS：

 $(document).ready(function() {
            $('.course-list').multiselect();

            $('.select-box').each(function(){
                $(this).find('.ms-options ul li').each(function(index){
                    $(this).attr('data-item-index',index);
                    $(this).attr('onclick','selectToggleItem(this)');
                    // $(this).bind('click', selectToggleItem);
                });
            });
        });

        function selectToggleItem(e){
            console.log('test');
        }

如果我单击列表项，它会调用函数 (selectToggleItem) 2 次 为什么？？？

我为此使用了 bootstrap-multiselect.js 和 css 文件。

Answer 1

当你点击标签时会遇到这个问题，因为事件是由 input 和 label 标签触发的。 如果单击复选框，则 selectToggleItem 仅触发一次。

为了防止这种行为，您可以将事件绑定到复选框而不是<li>标记。

 $(document).ready(function() { $('.course-list').multiselect(); $('.select-box').each(function(){ $(this).find('.multiselect-container li').each(function(index){ $(this).attr('data-item-index',index); $(this).find("input[type=checkbox]").bind('click', selectToggleItem); }); }); }); function selectToggleItem(e){ console.log('test'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script> <div class="select-box"> <select id="demo1" multiple class="form-control course-list"> <option value="Javascript">Javascript</option> <option value="Python">Python</option> <option value="LISP">LISP</option> <option value="C++">C++</option> <option value="jQuery">jQuery</option> <option value="Ruby">Ruby</option> </select> </div> <div class="select-box"> <select id="demo2" multiple class="form-control course-list"> <option value="Javascript">Javascript</option> <option value="Python">Python</option> <option value="LISP">LISP</option> <option value="C++">C++</option> <option value="jQuery">jQuery</option> <option value="Ruby">Ruby</option> </select> </div> <div class="select-box"> <select id="demo3" multiple class="form-control course-list"> <option value="Javascript">Javascript</option> <option value="Python">Python</option> <option value="LISP">LISP</option> <option value="C++">C++</option> <option value="jQuery">jQuery</option> <option value="Ruby">Ruby</option> </select> </div>