Question

我正在使用ajax方法.load来替换div的内容。问题是因为我正在使用的库不允许我替换div的内容，因为某些功能仍然在后台工作。

在这种情况下，我决定删除一个特定的div，然后再次添加它，并在最后一次加载div的内容。为此，我创建了一个代码：

HTML：

<div id="menu1">
  <ol>
    <li><a href="#"><b>Choose content</b></a>
      <ul>
        <li id="link_1"><a href="#">Link 1</a></li>
        <li id="link_2"><a href="#">Link 2</a></li>
    </ul>   
    </ol>
</div>

<div id="container">
<div id="div_content"></div>
</div>

JQUERY

<script type="text/javascript">
    $(document).ready(function(){

        $("#link_1").click(function(){
            $("#div_content").remove();
            $("#container").append("<div id='div_content'></div>");
            $('#div_content').load('content1.html');
         });

        $("#link_2").click(function(){
            $("#div_content").remove();
            $("#container").append("<div id='div_content'></div>");             
            $('#div_content').load('content2.html');
        });
    });
        </script>

使用此代码一切正常。事情在我的菜单中，我将有大量链接到其他内容。这就是为什么我不喜欢在每个链接中都有.remove和.append的重复代码。

为此，我为对象创建了.class组，我使用.remove和.append用于特定的.class和.load函数用于特定的链接ID。

<div id="menu1">
  <ol>
    <li><a href="#"><b>Choose content</b></a>
      <ul class="clear_div1">
        <li id="link_1"><a href="#">Link 1</a></li>
        <li id="link_2"><a href="#">Link 2</a></li>
    </ul>   
    </ol>
</div>

<div id="container">
<div id="div_content"></div>
</div>

<script type="text/javascript">
    $(document).ready(function(){

        $(".clear_div1").click(function(){
            $("#div_content").remove();
            $("#container").append("<div id='div_content'></div>");
        });

        $("#link_1").click(function(){
            $('#div_content').load('content1.html');
        });        
        $("#link_2").click(function(){            
            $('#div_content').load('content2.html');
        });
    });
</script>

在这段代码中，问题是始终.load函数在函数.remove和.append之前执行。你有什么想法如何在.remove和.append 之后执行.load 。

Answer 1

使用data-* attributes和jQuery's .data method的组合，然后您只需使用一个回调即可完成工作。

HTML

<ul>
    <li class="content_link" data-path="content1.html" id="link_1"><a href="#">Link 1</a></li>
    <li class="content_link" data-path="content2.html" id="link_2"><a href="#">Link 2</a></li>
</ul>

的Javascript

$(document).ready(function(){
    //Get all the links with class 'content_link'
    $(".content_link").click(function(){
         //Use the data method to get the value of data-path
         var contentPath = $(this).data("path");
         $("#div_content").remove();
         $("#container").append("<div id='div_content'></div>");
         $('#div_content').load(contentPath);
    });
});

Answer 2

~~很遗憾，我不相信你可以保证点击句柄的顺序。~~ （有关为何总是先调用负载的原因，请参见下文。）

我的建议是添加data-属性来解决此问题，并添加点击事件功能以消除此行为。

＆＃13;

$(document).ready(function(){
  var resetContainer = function () {
    var $li = $(this),
        newPage = $li.data('content'),
        $content = $("#div_content"),
        $container = $("#container");

    $content.remove();
    $container.append("<div id='div_content'></div>");
    $content.load(newPage);
  }

  $(".loadPage li").on('click' ,resetContainer);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="menu1">
  <ol>
    <li><a href="#"><b>Choose content</b></a>
      <ul class="loadPage">
        <li id="link_1" data-content='content1.html'><a href="#">Link 1</a></li>
        <li id="link_2" data-content='content2.html'><a href="#">Link 2</a></li>
    </ul>   
    </ol>
</div>

<div id="container">
<div id="div_content"></div>
</div>

＆＃13;

- 的更新/解释：

乍一看，首先发生加载功能的原因是因为事件冒泡。单击时，单击的第一个元素是li（实际上是链接，但href =＆＃34;＃＆＃34;）没有任何反应。 li元素具有.load()函数，因此它们首先被调用。

使用li进行所有事件处理后，浏览器会检查一级（在您的情况下，ul为.clear_div1。浏览器将触发ul上的任何点击事件处理程序，然后冒泡DOM树（检查沿途的点击事件），直到它到达顶部或传播被迫停止（如event.stopPropagation()）。

尽管如此，我仍然认为我提供的代码为您提供了更清晰，更具伸缩性的解决方案。祝你好运！

Answer 3

避免重复是功能的用途。你可以这样做。

function makeClickHandler(n) {
  return function () {
    $("#div_content").remove();
    $("#container").append("<div id='div_content'></div>");
    $('#div_content').load('content'+n+'.html');
  }
}

$("#link_1").click(makeClickHandler(1));
$("#link_2").click(makeClickHandler(2));

那就是说，删除整个元素并再次创建它可能不是一个好主意。

编辑：个人观点：JQuery不可替代知道js。我强烈建议您检查this和this。

一个接一个地执行JQUERY的功能

3 个答案: