jQuery的通话功能到功能

Question

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

这个代码，我调用使用jQuery，以创建一个新的树型菜单中调用HTML页面阿贾克斯这段代码，我的问题是，我想使用这两个菜单相同的功能，而且我不知道是否有办法做到这一点，而无需编写相同功能的两倍：

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

任何帮助表示赞赏。

Answer 1

如果我理解正确的问题，你要点击添加回调动态生成HTML。如果这是你想做的事，你可以用.on()处理器使用冒泡的事件，像这样：

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

此附加一个事件处理程序document，基本上说：“如果你看到一个click事件意味着一个#tree li元素，使用该选择器将其发送到所有当前元素，而不管它们是什么时候创建的“。

您可以阅读更多关于.on()处理程序here的信息。

Answer 2

在Javascript中，函数只是值。您可以将它们分配给变量，然后使用这些变量代替函数，就像其他任何值一样。

这里是你能做到这一点在你的代码的一种方式：

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

Answer 3

难道你不能只让一个JavaScript函数添加你使用两次的代码，然后在需要时调用这个函数吗？