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>

そして、新しいツリーメニューを作成してhtmlページを呼び出すために、jQuery ajaxでこのコードを呼び出します。私の問題は、これら2つのメニューで同じ機能を使用したいということです。書くことなくこれを行う方法があるのだろうか同じ関数を 2 回:

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

これにより、イベント ハンドラーが にアタッチされ、document基本的に「要素に対するクリック イベントが表示#tree liされた場合は、作成された時期に関係なく、そのセレクターを使用して現在のすべての要素に送信されます」というメッセージが表示されます。

.on()ハンドラーの詳細については、こちらをご覧ください。

于 2013-03-03T14:52:26.180 に答える
0

Javascript では、関数は単なる値です。それらを変数に割り当てて、他の値と同様に、それらの変数を関数の代わりに使用できます。

コードでそれを行う方法の 1 つを次に示します。

$(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

2回使用するコードを追加する1つのjavascript関数を作成し、必要に応じてこの関数を呼び出すことはできませんか?

于 2013-03-03T14:53:48.917 に答える