Jquery - 如何在重繪後動態添加可點擊元素

我已經看到關於此主題的其他帖子，但他們總是在重繪時更改元素。我有一個項目列表，我想單擊一個並通過ajax刪除它，然後重畫相同的列表並使其可點擊。重繪後的點擊不起作用。以下代碼重新繪製列表，一次。然後，'listto'項目不再可點擊。我以爲'上'應該處理這個。我該如何做這項工作？Jquery - 如何在重繪後動態添加可點擊元素

$('.listto').on('click',function() { 
    var tmp = $(this).attr('id').substr(1).split("|"); 
    $.ajax({url: '/contact/removefromlist/'+tmp[0]+'/'+tmp[1], 
     success: function(data) { 
      redrawtolist(data,tmp[1]) 
     } 
    }); 
}); 

function redrawtolist(data,item) { 
    var dat = JSON.parse(data); 
    var str = ""; 
    $.each(dat, function(index, rel) { 
     str += '<div id="t'+index+'|'+item+'" class="listto">'+rel+'</div>'; 
    }); 
    $('#tolist').html(str); 
}

來源

2013-07-31 Doug Wolfgram

處理程序更改爲：

$('#tolist').on('click', '.listto', function(){})

使用事件代表團是綁定事件動態地添加元素的好辦法。

您有關於直接結合大量的信息，並在此頁上委託綁定：http://api.jquery.com/on/

來源

2013-07-31 17:29:46

我知道我很接近......這是有道理的。謝謝！它的工作原理。 –

當您替換元素時，處理程序不見了。您可以使用事件委託來解決這個問題：

$('#tolist').on('click', '.listto', function() {

現在只要#tolist不更換，處理程序將不會被取代.listto元素刪除。

您可以在on documentation中閱讀更多關於活動委託的信息。

來源

2013-07-31 17:29:13

您的問題是您將事件附加到尚未準備好接收該事件的元素。您應該將事件附加到父元素，然後您可以篩選.listto。通過這種方式，當您的可點擊的元素被添加時無關緊要，它將起作用。這被稱爲事件代表團。您正在將處理事件的任務委託給另一個元素。

HTML：

<body> 
    <button>Click here to add book.</button> 
</body>

而且你的JS：

$(document).on("click", ".listto", function() { 
    alert('it works!'); 
});

而且這樣做的時候，不要將它連接到父得太高了樹。您想將它附加到最近的可能父元素。我們不需要像document這樣的點擊事件，因爲明確哪些元素會獲得此事件是個不錯的主意。將其附加到document將意味着任何具有類別.listto的元素都將可點擊並響應相同的代碼。如果您想在不同的按鈕中使用不同的功能，則不能，因爲它們都響應與document相同的代碼。

$('#tolist').on("click", ".listto", function() { //This would be best, but will only work if #tolist is not dynamic 
    alert('it works!'); 
});

來源

2013-07-31 17:29:44

Jquery - 如何在重繪後動態添加可點擊元素

回答

相關問題