當點擊

Question

時更改（.load）HTML內容我正在嘗試開發一個div，單擊其中任何一個按鈕時都會更改整個網站的內容。但是我只能點擊一次，點擊新內容不會改變。任何人都可以幫助我嗎？

HTML：

<section> 
    <div id="include"> 
    &nbsp;  
    </div> 
</section> 

JQuery的：

<script> 
    $(document).ready(function() { 
    $("div[data-feature='1']").click(function(e){ 
     $("#include").load("folder/1.html"); 
    }); 
    $("div[data-feature='2']").click(function(e){ 
     $("#include").load("folder/2.html"); 
    }); 
    $("div[data-feature='3']").click(function(e){ 
     $("#include").load("folder/3.html"); 
    }); 
    $("div[data-feature='4']").click(function(e){ 
     $("#include").load("folder/4.html"); 
    }); 
    $("div[data-feature='5']").click(function(e){ 
     $("#include").load("folder/5.html"); 
    }); 
    $("div[data-feature='6']").click(function(e){ 
     $("#include").load("folder/6.html"); 
    }); 
    }); 
</script> 

---

感謝所有的答案。

Answer 1

使用事件代表團on()，只是你的代碼像

$(document).ready(function() { 
    $(document).on('click', 'div[data-feature]', function(e){ 
     $("#include").load("folder/" + $(this).attr('data-feature') + ".html"); 
    }); 
    }); 

這將附加的事件處理程序的所有當前和未來（加載）div[data-feature]元素

Answer 2

你必須使用live而不是bind。我會在下面解釋。

<script> 
    $(document).ready(function() { 
     $('body').on('click', 'div[data-feature]', function() { 
      var $this = $(this); 
      var feature = $this.data('feature'); 
      $("#include").load("folder/" + feature + ".html"); 
     }); 
    }); 
</script> 

區別在於：您的活動正在添加到body。考慮一下：當你點擊一個按鈕時，你也點擊了該按鈕的每個父元素，包括body。 jQuery知道哪個元素觸發了這個點擊，當body收到點擊時，它會檢查觸發點擊的元素是否爲div[data-feature]，如果是的話，該函數將被執行。

直接綁定的問題，在這種情況下，您的元素必須存在，以便函數可以附加到它。