單擊函數在具有相同類名的元素上執行多次

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>