click function execute multiple times on elements which has same class name

Question

I used bootstrap multiselect js plugin, after i used in my code, I need to add one click event for each options i select so i bind the click event for that What happened is when i try to click the select option the function execute 2 times. (It supposed to execute only 1 time) I want to know whats happening in my code, Can anyone explain me ?

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

My code 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');
        }

If i click the list item it call the function (selectToggleItem) 2 times Why ???

i used bootstrap-multiselect.js and css file for this.

Answer 1

You meet this problem when you click on the label because the event is triggered by both input and label tags. If you click on the checkbox, the selectToggleItem is triggered only once.

To prevent that behaviour, you can bind the event to the checkbox instead of the <li> tag.

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