添加的列表視圖不響應點擊

Question

我有一個使用JavaScript / jQuery創建的列表視圖。 當我單擊列表項時，我必須執行代碼。

方案1：我使用以下代碼：

$("div#home ul#one li").live('click', function() { console.log('click') });

此代碼獲得了點擊，但獲得了兩次。 因此，當我單擊列表項時，它會輸出兩個console.logs

方案2：我有此代碼用於在常規index.html文件中創建的另一個列表。

$("div#home ul#two li").off('click').on('click', function() { console.log('click') });

此代碼不會執行兩次代碼。

無論如何，我可以讓方案2在JavaScript創建的listview上工作嗎？ （也歡迎其他任何建議）

Answer 1

如果要動態創建元素，則需要使用委托表單

$("div#home").on('click','li', function() { console.log('click') });

將事件處理程序綁定到綁定時存在的最接近的靜態父級

如果您的ul不是動態的-您可以將其綁定到ul

$("div#home ul").on('click','li', function() { console.log('click') });

Answer 2

為了讓場景2工作動態附加元素，使用on與委托，就像這樣：

$("#two").on('click', 'li', function() { console.log('click') });

我縮短了第一個選擇器，因為如果您通過id選擇，那么它應該是唯一的。

另外，我會假設第一個方案兩次登錄到控制台，因為您嵌套了li元素？

Answer 3

問題是您沒有在正確的位置綁定on偵聽器，而是在ANY頁的pageinit處理函數中聲明將您的on偵聽器添加到li： $("div#home").on('click','li', function() { console.log('click') });

因此，您將在div#login頁面上附加一個偵聽器，並在第二個div#home頁面上附加一個冗余的第二偵聽器。 當您單擊li一個事件將觸發兩個偵聽器，並且您將獲得兩次單擊。

您應該做的是在$(document).on('pageinit', function()將on監聽器聲明包裝在檢查您所在頁面的條件中：

if ($(this).attr(id') === 'home'){
     $("div#home").on('click','li', function() { console.log('click') });
}

那是簡單的解決方案，您真正應該做的是根據觸發了pageinit事件的頁面來分支代碼，並基於該頁面調用正確的代碼。 請參閱：有關構建jQM Apps的指南。

其要旨是將一個數據屬性附加到描述您的頁面的div[data-role=page]等上，然后為每個頁面調用單獨的代碼。 （而不是像本示例中那樣使用ID，因為您可以輕松地在多頁面jQM應用中擁有一個頁面的多個實例）

Answer 4

我無法創建jsFiddle，因為這似乎由於某種原因無法加載我的函數。 我已經將腳本在線發布在自己的網站上。

登錄設置正在運行。 只需單擊登錄，便會出現屏幕（主頁）。 如果單擊LI標記之一並打開控制台日志，則會看到2次點擊，而不是1次。

如果您需要任何代碼，請在下面評論。

我使用的當前代碼：

$("div#home").on('click','li', function() { console.log('click') });

可以在custom.js文件中找到