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函數添加你使用兩次的代碼，然後在需要時調用這個函數嗎？