如何使用的HTML（）的jQuery的document.ready後裝

我有幾個HTML元素，由JavaScript函數在頁面上呈現：如何使用的HTML（）的jQuery的document.ready後裝

<a href="#" class="test1">Test</a> 
<a href="#" class="test2">Test</a> 
<a href="#" class="test3">Test</a>

我再有進一步的JavaScript，我用它來創建點擊測試時的功能：

$(document).ready(function(){ 

    $(".test1").click(function() { 
    // Code here 
    }); 

    $(".test2").click(function() { 
    // Different code here 
    }); 

    $(".test3").click(function() { 
    // Different code here 
    }); 

});

然而，由於插入HTML不同時加載的頁面加載（它是動態插入後），我的點擊功能不捕捉事件。我該如何解決這個問題？

來源

2013-11-09 alias51

您需要使用委派的事件處理程序：

$(document).ready(function(){ 
    $(document) 
     .on('click', '.test1', function() { 
      // Code here 
     }) 
     .on('click', '.test2', function() { 
      // Code here 
     }) 
     .on('click', '.test3', function() { 
      // Code here 
     }); 
});

注意，爲了獲得最佳性能document應改爲，您可在DOM負荷最接近的靜態父元素。

來源

2013-11-09 14:02:21

如果我有一大堆函數，我可以將它們嵌套在（document）.on下面嗎？如果是這樣，語法是什麼？ – alias51

這取決於這些函數的結構，以及邏輯如何在它們之間流動。你可以編輯你的問題來包含這些功能。 –

請參閱更新的問題 – alias51

使用.on()

因爲元素被添加動態。所以你必須使用Event Delegation你不能直接綁定到這些事件。

$(document).on('click', '.test', function() { //code here });

語法

$(elements).on(events, selector, data, handler);

來源

2013-11-09 14:04:19

謝謝，爲什麼要使用（document）.ready呢？這有什麼優點/缺點？ – alias51

@ alias51閱讀[本]（http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on） –

你可以讓你的點擊事件「活」，所以他們重視的對象，因爲它們被引入到DOM。只需更改 .click（function（）{....}）; （'click'，function（）{....}）;

來源

2013-11-09 14:51:19

抱歉格式不正確。我在打電話的手機上...... –

不，不。 '.live（）'已被棄用。改用'.on（）'。 – Terry

哦，不知道。太糟糕了。感謝更新！ –

如何使用的HTML（）的jQuery的document.ready後裝

回答

相關問題