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.

Use a callback function.

Casey Dwayne
– Casey Dwayne

2013-03-03 14:53:11 +00:00
Commented Mar 3, 2013 at 14:53 — Casey Dwayne
– Casey Dwayne, Commented Mar 3, 2013 at 14:53

Anders Arpi · Accepted Answer · 2013-03-03 14:52:26Z

3

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.

answered Mar 3, 2013 at 14:52

Anders Arpi

8,4373 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JMast Over a year ago

Thank you!! Im new to jQuery and Javascript so it was very helpful advice!

jonvuri · Accepted Answer · 2013-03-03 14:50:09Z

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

Kshitija Vadnerkar · Accepted Answer · 2013-03-03 14:53:48Z

0

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

answered Mar 3, 2013 at 14:53

Kshitija Vadnerkar

1251 gold badge4 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery call function into function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related