Измените (.load) содержимое HTML, когда нажмите

Question

Я пытаюсь создать 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 знает, какой элемент вызвал этот клик, и когда тело получит клик, он проверяет, будет ли элемент, который вызвал клик, div[data-feature], если это так, эта функция будет выполнена.

Проблема с прямым связыванием в этом случае состоит в том, что ваш элемент должен существовать, чтобы функция могла быть добавлена ​​к нему.