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

任何帮助表示感谢。

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，基本上会说“如果您看到一个针对#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函数添加你使用过两次的代码然后在需要时调用这个函数吗？

jQuery调用函数进入函数

3 个答案: