爲什麼當我點擊圖像時什麼都沒有發生？

-1

我是jQuery的新手，所以希望這不是一個問題的兩個啞巴，但我已經環顧四周。爲什麼當我點擊圖像時什麼都沒有發生？

我有一個簡單的待辦事項列表here：我很好奇，爲什麼當我點擊顯示的圖像（添加一個項目後），這些功能什麼都不做。

以下是兩個值得關注的方法......我很確定他們沒有被調用。我不確定爲什麼：

$('.delete').on('click', function(event) { 
    event.preventDefault(); 
    var reply = confirm("Are you sure you want to delete this todo item?"); 
    if(reply === true) { 
     $(this).closest('.item').remove(); 
    } 
}); 

$('.edit').on('click', function(event) { 
    $(this).closest('.item').slideDown('fast'); 
});

來源

2013-07-16 Nick

因爲你有更多的同一類的對象。 –

在創建元素之前調用'.on（）'方法。您只能將處理程序綁定到存在的元素。要解決這個問題，你可以使用* event delegation *。這意味着你將處理程序綁定到某個祖先，比如你的'＃list'元素，然後在單擊正確的嵌套元素時運行你的代碼。 jQuery確定點擊的方法使用CSS選擇器。要了解如何使用它們，請閱讀'.on（）'的文檔。否則，您可以在創建新元素時直接綁定處理程序。 –

很久沒有看到這種問題... –

您可以使用事件委派如下：

$('#list').on('click', '.delete', function(event) { 
    event.preventDefault(); 
    var reply = confirm("Are you sure you want to delete this todo item?"); 
    if(reply === true) { 
     $(this).closest('.item').remove(); 
    } 
}); 

$('#list').on('click', '.edit', function(event) { 
    $(this).closest('.item').slideDown('fast'); 
});

另外，和更有效的，選擇是定義你的點擊處理，然後將其分配給之後的元素他們創造：

var onDeleteButtonClicked = function(event) { 
    //delete code from above. 
}; 

var onEditButtonClicked = function(event) { 
    //edit code from above. 
}; 

function addTo(event) { 
    event.preventDefault(); 

    var toAdd = $('#addition').val(); 

    if(toAdd.length > 0) { 
     var listItem = $('<li class="item">' + toAdd + '</li>'); 
     var img = $('<img class="delete" src="https://cdn1.iconfinder.com/data/icons/uidesignicons/delete.png">') 
      .click(onDeleteButtonClicked); //Assign your delete click handler here. 
     var img1 = $('<img width="4%" class="edit" src="https://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Modify.png">') 
      .click(onEditButtonClicked); //Assign your edit click handler here. 
     listItem.append(img); 
     listItem.append(img1); 
     $('#list').append(listItem); 
     $('#addition').val("") 
    } else { 
     alert("Cannot add empty list item!"); 
    } 
}

來源

2013-07-16 12:57:51 crush

什麼回合img.bind（...）; ？ – DarkBee

你不需要「需要」事件委託，但它是一種選擇。也許你應該向OP解釋這是如何工作的。 –

@CrazyTrain True。他也可以在創建元素時分配click事件處理程序。 – crush

試試這個：

$('#container').on('click','.delete' ,function(event){ 

    event.preventDefault(); 
    var reply = confirm("Are you sure you want to delete this todo item?"); 
    if(reply === true) { 
     $(this).closest('.item').remove(); 
    } 

});

來源

2013-07-16 12:58:16

爲什麼當我點擊圖像時什麼都沒有發生？

回答

相關問題