javascript - 一个接一个地执行函数 JQUERY

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 组，我为特定的 .class 使用 .remove 和 .append，为特定的链接 ID 使用 .load 函数。

<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);
    });
});