Question

我有一个页面，显示使用无序列表的树列表。对于每个有孩子的li，我希望它能够进行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

以下是进行Ajax调用的实际jquery函数：

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
}

这是＆＃34;查看来源＆＃34;我的页面版本（一旦呈现）。这显示了链接的外观，使得＆＃34; getChildren（tsk）＆＃34;呼叫。创建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>

如何在jquery ajax调用

1 个答案: