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()一起使用，只需使用您的代码

$_GET

这将附加所有当前和未来（已加载）$(document).ready(function() { $(document).on('click', 'div[data-feature]', function(e){ $("#include").load("folder/" + $(this).attr('data-feature') + ".html"); }); });元素的事件处理程序

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]，如果是，则该函数将被执行。

在这种情况下，直接绑定的问题是你的元素必须存在，所以函数可以附加到它。

单击时更改（.load）HTML内容

2 个答案: