$（document）.on（'click'發射不止一次

Question

我一直在購物清單中遇到麻煩，我的數組中的錯誤項目被刪除，或者多個項目被刪除。將一些警告語句到我的代碼後，我已經意識到這個功能是發射兩次：？

/*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班，因此兩次電話。