問題與.on（）方法

我想做一個MVC的培訓目的，我正在按照相當老的教程。本教程中的實現使用了live（），但我決定使用jQuery 2.1.1並且必須在（）方法上實現。我做了一個小用例來澄清。問題與.on（）方法

我可以在頁面上插入新的元素，同時在數據庫中添加這些

我可以刪除無論從DB和DOM
這在DB中存在預裝的元素在頁面加載
我不能從數據庫和DOM中刪除既不是實時添加的元素。

這是我的完整代碼。

$(function(){ $.get('dashboard/xhrGetListings', function(o){ for (var i = 0; i < o.length; i++) { $('#listInserts').append('<div>' + o[i].text + '<a class="del" rel="' + o[i].id + '" href="#">x</a></div>'); } $('.del').on("click", function() { delItem = $(this); var id = $(this).attr('rel'); $.post('dashboard/xhrDeleteListing', {'id': id}, function(o) { delItem.parent().remove(); // THIS IS NOT EXECUTED AT ALL }, 'json'); return false; }); }, 'json');

//不necesarly相關，它只是幫助了代碼的清晰

$('#randomInsert').on("submit", function() { var url = $(this).attr('action'); var data = $(this).serialize(); console.log(data); $.post(url, data, function(o) { $('#listInserts').append('<div>' + o.text + ' <a class="del" rel="' + o.id + '" href="#">X</a></div>'); }, 'json'); return false; });

}）;

另一個我不關注的問題是，如果我刪除$ .post方法中的父級（如上面的代碼所示），它不會被刪除，只有當我將該行移出post方法。對此的任何澄清也將非常感激。

來源

2014-06-19 Vigh Iosif

'$。員額（ '儀表盤/ xhrDeleteListing' ...）'做這個請求成功完成？你控制檯給出任何錯誤？檢查js調試工具 – NDM

是的，這是成功執行的...意味着相關的代碼運行，但括號內的任何內容都不會執行。（在控制檯上沒有錯誤） –

它調用的代碼可能已經運行，但是如果它沒有返回HTTP狀態代碼200，那麼該函數將不會被調用。您的瀏覽器會記錄所有ajax調用，請雙擊相關調用的狀態返回。 – NDM

使用event delegation和event.preventDefault()停止默認操作

$('#listInserts').on("click", '.del' , function(event) { 

     event.preventDefault(); 

     // your code come here 
});

來源

2014-06-19 11:42:36

問題與.on（）方法

回答

相關問題