Javascript $（文档）。在（'click'上多次触发

我已经有一段时间在处理购物清单时遇到问题，在购物清单中，我的数组中的错误项目被删除，或者有多个项目被删除。在我的代码中添加了一些警报语句后，我意识到此函数将触发两次：

你知道为什么吗？我什么都试过了，完全卡住了

完整js:

在该功能中：

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>'
        );

}

---

尝试为图像指定bin以外的其他类。bin类的两倍，因此调用的两倍。

是否要删除单个元素？items.StipeIndx，2；将删除两个元素。

 $(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>'
            );

    }

    });

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>'
        );

}