jQuery call function into function

Question

I have this code on HTML

<ul id="menu">
    <li class="mainmenu" id="newsarticles"><a href="#">News &amp; articles</a>

    <ul id="newsarticles">
      <li class="submenu" id="news"> <a href="#">News</a>

      </li>
      <li class="submenu" id="articles"> <a href="#">Articles</a>

      </li>
    </ul>
    <li class="mainmenu" id="contactus"><a href="#">Contact Us</a>
    </li>
</ul>

and i call with jQuery ajax this code in order to create a new tree menu and call html pages, my problem is that i want to use the same function on these two menus, and i wonder if there is a way to do this without writing the same function two times:

$(document).ready(function() {

  $("#menu li").on("click", function(e) {
   e.stopPropagation();

  var currentId = $(this).attr('id');
  var scriptPath = currentId+".html";
  var tree = $(this).closest("ul").attr("id");

  $.ajax({
  url: scriptPath,
    type:'HEAD',
    success: function()
    {
     //file exists
     $("#tree").html($("#"+tree).html());
     $("#text").load(scriptPath);

     $("#tree li").click(Menu_callTabs);  //the same function for tree menu
     }
   });
  });
 });



 function Menu_callTabs(){
  $("#menu li").on("click", function(e) {

    var currentId = $(this).attr('id');
    var scriptPath = currentId+".html";
    var tree = $(this).closest("ul").attr("id");

    $.ajax({
      url: scriptPath,
      type:'HEAD',
      success: function()
      {
       //file exists
       $("#tree").html($("#"+tree).html());
       $("#text").load(scriptPath);

      $("#tree li").click(Menu_callTabs);  //the same function for tree menu
    }
  });
  });
}

Any help appreciated.

Answer 1

Can't you just make one javascript function adding your code which you use twice and then call this function whenever needed?

Answer 2

If I understand the question correctly, you want to add click callbacks to HTML that is generated dynamically. If that is what you want to do, you can make use of bubbling events with the .on() handler like so:

$(function() {
    $(document).on("click", "#tree li", function(e) {
        //this event will be fired for any element with the "#tree li" selector
        //no matter when the HTML element is created
    }
});

This attaches an event handler to the document that basically says "if you see a click event meant for a #tree li element, send it to all current elements with that selector, no matter when they were created".

You can read more about the .on() handler here.

Answer 3

In Javascript, functions are just values. You can assign them to variables and then use those variables in place of the function, just like any other value.

Here's one way you could do it in your code:

$(document).ready(function() {

var func = function(scriptPath)
{
    //file exists
    $("#tree").html($("#"+tree).html());
    $("#text").load(scriptPath);

    $("#tree li").click(Menu_callTabs);
};


$("#menu li").on("click", function(e) {
e.stopPropagation();

var currentId = $(this).attr('id');
var scriptPath = currentId+".html";
var tree = $(this).closest("ul").attr("id");

$.ajax({
url: scriptPath,
    type:'HEAD',
    success: function () { func(scriptPath); }
});
});
});



function Menu_callTabs(){
$("#menu li").on("click", function(e) {

    var currentId = $(this).attr('id');
    var scriptPath = currentId+".html";
    var tree = $(this).closest("ul").attr("id");

    $.ajax({
    url: scriptPath,
    type:'HEAD',
    success: function () { func(scriptPath); }
});
});
}