0

我在 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 ajax 调用这段代码来创建一个新的树形菜单并调用 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
    }
  });
  });
}

任何帮助表示赞赏。

4

3 回答 3

3

如果我正确理解了这个问题，您希望将点击回调添加到动态生成的 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
    }
});

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.

于 2013-03-03T14:52:26.180 回答
0

在 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); }
});
});
}
于 2013-03-03T14:50:09.053 回答
0

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

于 2013-03-03T14:53:48.917 回答