javascript - $(document).on ('click' 多次触发

Question

有一段时间我在处理购物 list 时遇到了麻烦，数组中的错误项目被删除，或者多个项目被删除。在我的代码中添加一些警报语句后，我意识到这个函数触发了两次:

/*Delete item*/
$(document).on('click', '.bin', function(){
    var me = this;
    var item = $(me).closest('li');
    var index = $(item).text();
    var newString = index.replace(/[0-9]/g, '');
    var indx = items.indexOf(newString);
    items.splice(indx, 2);
    console.log(items);
    localStorage.setItem("items", JSON.stringify(items));
    $(item).slideUp();

});

知道为什么会这样吗？我已经尝试了一切，但完全陷入困境。

完整的js:

 $(document).on('click', '#enterbutton', function(){
        $.mobile.changePage('#notesPage');

    });



$(document).on("pagecreate","#notesPage",function() {

    /*Load local storage items*/
    var items = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : items = [];
    var even = [];
    var odd = [];



    console.log(items);
    items.forEach(function(key, value) {
         if (isOdd(value+1)==1) {even.push(key);}
         else { odd.push(key);}

    });  

    if ((0<even.length) && (0<odd.length)){

     for(i=0; i<even.length; i++){

    appendItem(even[i], odd[i]);}}



    /*Add new item*/

    $('form').on('submit' , function(event){
        event.preventDefault();

        if($('#newNote').val() == '' || $('#newamount').val() == ''){
      alert('Input can not be left blank');
   } else{

        var item = $('#newNote').val();
        var inum = $('#newamount').val();
        //Append this to the arrayItems;
        saveToLocalStorage(item, inum);


        //Create the new item and inject to list
        appendItem(item, inum);


        $('#mainList').listview('refresh');
        $.mobile.changePage('#notesPage');
         }
    });

        /*Delete item*/
    $(document).on('click', '.bin', function(){
        var me = this;
        var item = $(me).closest('li');
        var index = $(item).text();
        var newString = index.replace(/[0-9]/g, '');
        var indx = items.indexOf(newString);
        items.splice(indx, 2);
        console.log(items);
        localStorage.setItem("items", JSON.stringify(items));
        $(item).slideUp();

    });



        /*Check item*/
    $(document).on('click', '.check', function(){
        var item = $(this).closest('li');
        $(item).toggleClass("checked")

    });

        /*Save data to localStorage*/
    function saveToLocalStorage(data, data1) {
        items.push(data, data1);
        console.log(items);
        localStorage.setItem('items', JSON.stringify(items));
    }

    function isOdd(num) { return Math.abs(num % 2);}



    /*Append item to html*/
    function appendItem(data, data1) {  
        $('#mainList').append('<li class="ui-li-static ui-body-inherit ui-first-child ui-last-child">' + 
                    '<input type="checkbox" class = "check" </input>' +
                    '<div type="number" class = "number">' + data1 + '</div>' +
                    '<div class="item">' +  data  + '</div>' +

                     '<a href="javascript:undefined;" class="bin">' + 
                        '<img class="bin" src="Bin.png" ' +
                        '</a>' + 
            '</li>'
            );

    }

    });

Answer 1

在此函数中:

function appendItem(data, data1) {  
    $('#mainList').append('<li class="ui-li-static ui-body-inherit ui-first-child ui-last-child">' + 
                '<input type="checkbox" class = "check" </input>' +
                '<div type="number" class = "number">' + data1 + '</div>' +
                '<div class="item">' +  data  + '</div>' +

                 '<a href="javascript:undefined;" class="bin">' + 
                    '<img class="bin" src="Bin.png" ' +
                    '</a>' + 
        '</li>'
        );

}

尝试为image提供除bin之外的其他类。 bin 类的两倍，因此调用也是两次。