由Javascript生成的目標HTML？

Question

我有一個使用JavaScript插件創建的滑塊按鈕，它會自動生成類名爲.flex-next的元素。然而，當我運行下面的代碼，沒有被記錄在我的控制檯：

$(window).load(function() { 
    $(".flex-next").on("click", function() { 
     console.log("youclick"); 
    }) 
}); 

Answer 1

當您使用$(window).load(...);加載窗口時，將您的呼叫設置爲觸發。一個flexsider啓動$(document).ready(...)這發生在窗口加載和所有的內容被加載到DOM。所以當你的腳本觸發時，它會尋找一個尚未存在的元素。

通過觸發$（document）.ready（）上的腳本來解決此問題，並使用event delegation。最佳實踐方法是聲明你的功能，像這樣：

$(document).ready(
    $(document).on('click', ".flex-next", function() { 
     console.log("youclick"); 
    }); 
}); 

這樣點擊監聽器會等到頁面已準備就緒，將提出一個click事件到任何.flex-next事件，即使是動態創建的。這樣，如果您使用異步加載的大圖像，代碼仍然可以工作。

Answer 2

由於按鈕是動態添加的DOM加載後，您需要使用event delegation因此點擊事件可以在此按鈕上使用：

$(document).on('click','.flex-nex',function() { 
    console.log("youclick"); 
}) 

Answer 3

您可能正在調用滑塊按鈕執行前的$（「。flex-next」）。因此，基本上，當您調用.on時，DOM中不存在.flex-next類。在插件初始化後，您應該調用.on調用。