如何捕獲事件並阻止它從泡泡到jquery ajax中的父級調用

Question

我有一個使用無序列表顯示樹列表的頁面。對於每個有孩子的李，我希望它做一個ajax調用去獲得這些孩子，然後將它們顯示爲另一個ul/li組合。這樣可行。
但是，如果其中一個孩子也是父母，我希望它再次打一個ajax電話，然後去找它的孩子。

問題是，當我進行額外的呼叫時，它會進行該呼叫，但會另外呼叫父母並刪除先前的呼叫。

這是問題：

-Parent 
    - Child 1 
    - Child 2 
    - child a <-- clicking here briefly opens up kids. Then "getchildren" 
     - child 2.a \-- bubbles up to Child 2. Then displays only child 
     - child 2.b \- a, b, c and child 2.a and 2.b go away. 
    - child b 
    - child c 
    - Child 3 

下面是實際的jQuery的功能，使Ajax調用：

function getChildren(tsk) { 
    var taskId = '#'.concat(tsk); 
    alert("getChildren::taskid = "+taskId); 

    $.ajax({ //create an ajax request to load_page 
     type: "get", 
     dataType: "html", 
     url: "kids1.jsp?taskId="+tsk, 
     success: function(data){ 
      alert("getChildren.ajax::data="+data); 
      $(taskId).html(data); 
     } 
    }); 
    event.stopPropagation(); // <-- this doesn't work 
} 

這是我的頁面的「查看源文件」版本（一旦它呈現）。這顯示了哪些鏈接看起來像是「getChildren（tsk）」呼叫。創建li條目的代碼如下所示。 這是TOP（家長）級別。

<ul class="mktree" id="tree1"> 
<li class="liOpen" id="theJob" style="visibility:hidden"> 
    <a href="jobDetail.jsp?rowSelected=1&jobNameSelected=2017_sb207_HRS89E-1_RP-HI.EDEN_PDU.09-06.09:39:09.tpcz4686-001" onClick='boldTask(this)' id="black" target=right>2017_sb207_HRS89E-1_RP-HI.EDEN_PDU.09-06.09:39:09.tpcz4686-001</a></li> 
<ul id="treeList" name="treeList" style="visibility:hidden"> 

      <li id=0200001700CE36AC143D0002000073B1><a href='taskDetail.jsp?taskNameSelected=0200001700CE36AC143D0002000073B1' id='gray' onClick='boldTask(this)' target=right>&nbsp;Batcher</a><input type='hidden' name='Batcher' value='com.lxnx.fab.wim.nfdjobmon.util.TaskInfo@91a0c3'></li> 

      <li class='liClosed' id=0200001700CE36AC14F60002000073B1 onClick=getChildren('0200001700CE36AC14F60002000073B1')><a href='taskDetail.jsp?taskNameSelected=0200001700CE36AC14F60002000073B1' id='blue' target=right>&nbsp;SEARCH_LOCK_ACT</a><input type='hidden' name='SEARCH_LOCK_ACT' value='com.lxnx.fab.wim.nfdjobmon.util.TaskInfo@17f6796'></li> 

      <li id=0200001700CE36AC14B00002000073B1><img src='images/done.gif'><a href='taskDetail.jsp?taskNameSelected=0200001700CE36AC14B00002000073B1' id='blue' onClick='boldTask(this)' target=right>&nbsp;BinderCreator</a><input type='hidden' name='BinderCreator' value='com.lxnx.fab.wim.nfdjobmon.util.TaskInfo@169bc15'></li> 
... 

以下是包含getChildren調用的代碼。它調用一個java方法（getChildTasks3）來創建單個li條目。

<ul class="mktree" id="theJob" style="visibility:hidden"> 
    <a href="jobDetail.jsp?rowSelected=<%=rowSelected%>&jobNameSelected=<%=jobNameSelected%>" onClick='boldTask(this)' id="black" target=right><%=jobNameSelected%></a> 
<% 
    // At this point, we've got the job 
    // Now get all the tasks 
    long Ltime = System.currentTimeMillis(); 

    ArrayList jobTasks = job.getOrderedTasks(); 
    for (int i = 0 ; i < jobTasks.size(); i++) { 

     TaskInfo jobTask = (TaskInfo)jobTasks.get(i); 
     request.setAttribute("taskNameSelected",jobTask.getTaskId()); 
     tmpSession.setAttribute(jobTask.getTaskId(),jobTask); 

     String taskOutput = jobTask.getChildTasks3(jobTask, tmpSession); 
     %> 
     <%=taskOutput%> 
     <% 
    } 

%> 
</ul> 

首先 - 我如何捕獲我的函數getChildren（tsk）中的事件？我需要捕捉它嗎？我怎麼才能讓它只運行我點擊的條目 - 而不是父條目？

我是jquery的新手 - 所以我很感激任何和所有的幫助！

更新：我能夠使用onClick函數得到它的工作。我嘗試使用class = myClickable，現在它只調用父級。這裏是代碼：

$(function() { 
    $(".my-clickable").on('click', function(event) { 
     var taskId=$(this).attr('id'); 
     var tsk = '#'.concat(taskId); 

     alert("in clickable function: id: "+taskId); // <-- parent ID 
     //event.stopPropagation(); 

     $.ajax({ //create an ajax request 
      type: "post", 
      dataType: "html", 
      url: "kids1.jsp?taskId="+taskId, 
      success: function(data){ 
       alert("clickable.ajax::data="+data); 
       //$(tsk).html(data); 
       $(tsk).append(data); 
      } 
     }); // end ajax 
     event.cancelBubble=true; 
    }); 

}); 

有什麼建議嗎？

Answer 1

簡單的回答是，你應該做在你的網線以下onclick處理程序：

onClick=getChildren(event, '0200001700CE36AC14F60002000073B1')

，然後改變你的getChildren功能：

function getChildren(event, tsk) { 
    var taskId = '#'.concat(tsk); 
    alert("getChildren::taskid = "+taskId); 

    $.ajax({ //create an ajax request to load_page 
     type: "get", 
     dataType: "html", 
     url: "kids1.jsp?taskId="+tsk, 
     success: function(data){ 
      alert("getChildren.ajax::data="+data); 
      $(taskId).html(data); 
     } 
    }); 
    event.stopPropagation(); // <-- this should now work 
} 

較長的答案是，你應該避免綁定點擊處理程序內嵌，而是使用javascript綁定它們，這是一個快速參考，讓您開始使用它：JavaScript ‘this’ and Event Handlers

[編輯] 這裏是你可以運行，顯示了快速的回答方式的一個片段，以及首選的方法：我試過了

function myFunction(event, id) { 
 
    console.log(id); 
 
    event.stopPropagation(); 
 
} 
 

 
// prefered way of doing click events (or any other event binding) 
 
$(function() { 
 
$(".my-clickable").on('click', function(event) { 
 
    console.log($(this).attr('id')); 
 
    event.stopPropagation(); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li onclick="myFunction(event, 'A')">Parent A 
 
    <ul> 
 
     <li onclick="myFunction(event, 'A.1')">Child A.1</li> 
 
     <li onclick="myFunction(event, 'A.2')">Child A.2</li> 
 
     <li onclick="myFunction(event, 'A.3')">Child A.3</li> 
 
     <li onclick="myFunction(event, 'A.4')">Child A.4</li> 
 
    </ul> 
 
    </li> 
 
    <li id="B" class="my-clickable">Parent B 
 
    <ul> 
 
     <li id='B.1' class="my-clickable">Child B.1</li> 
 
     <li id='B.2' class="my-clickable">Child B.2</li> 
 
     <li id='B.3' class="my-clickable">Child B.3</li> 
 
     <li id='B.4' class="my-clickable">Child B.4</li> 
 
    </ul> 
 
    </li> 
 
    <li>Parent C</li> 
 
    <li>Parent D</li> 
 
</ul>