Executing Functions One by One JQUERY

Question

I use the ajax.load method to replace the contents of a div. The problem is that the library I use does not allow me to replace the contents of the div, because some functions still work in the background.

In this case, I decided to delete a specific div, and then add it again, and at the last boot, the contents of the div. To do this, I created the code:

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>

With this code, everything works well. The point is in my Menu, I will have a large number of links to other materials. That's why I don't like having duplicate codes with .remove and .append in every link.

To do this, I created a class group for objects, and I use .remove and .append for specific .class and .load for a specific link identifier.

<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. .load .remove .append?

Answer 1

data- * attributes jQuery.data , .

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-, , click-event, .

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

<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>

Hide result

- Update/

, , , . , li ( , href= "#" ). li .load(), .

, , ( , 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.