Question

在动态构建的jQuery树中，我想运行一个函数来查找正确的元素。如果找到该元素，我想运行一个点击事件。

树的子项在通过Ajax调用单击其父项时会生成。因此，'search'函数需要等待Ajax完成，然后查看DOM元素是否存在。

我无法告诉我的函数究竟需要等待哪个ajax调用，所以我认为我通常会等待所有ajax调用。

我的职能在哪里：

if ($("#treeview10 tbody tr[data-id="+id+"] .node-name").length){

    $("#treeview10 tbody tr[data-id="+id+"] .node-name").click();

}else{

    traverse_tree($("#treeview10 tbody tr[data-id="+id+"] .node-name"));
}


function traverse_tree(domelement){

    $("#treeview10 tbody tr .node-name").each(function(index, el) {

        $(el).click();

        $(document).ajaxStop(function () {
            console.log('loop');
            if (domelement.length){

                domelement.click();

                return false;
            }   
        });         
    });

    if (domelement.length){

        console.log('found'); 

    }else{

        $(document).ajaxStop(function () {

            console.log('NOT found');

            traverse_tree(domelement);

        });
    }
}

然而，这不起作用。 .each工作后的click事件，但它似乎不等待Ajax调用完成。

有人可以帮助我吗？

Answer 1

如果有权访问AJAX函数，则应将transverse fuction添加到处理特定DOM更改的AJAX的complete中。 最好知道哪个AJAX函数正在处理特定DOM上的更改。您可以使用 DEVTOOLS here。

$.ajax({
  type: "POST",
  url: "ajaxposturl",
  data: "data to be submitted",
  domeelement: targettedDOMElement,
  success: function(data, textStatus) {
   
  } 

  complete: function(data) {
   // This is where you call your function.
  traverse_tree(domelement);

  } 
  error: function(MLHttpRequest, textStatus, errorThrown) {
        alert(errorThrown);
  }
});

第一次单击事件不等待AJAX停止调用完成，因为它位于执行AJAX调用的块代码之外。

function traverse_tree(domelement){
    var found = false;

    $("#treeview10 tbody tr .node-name").each(function(index, el) {
        
            if (domelement.length){
                found = true;
                domelement.click();
                console.log('found'); 
                
            }          
        });         
    });

    if (!found){
        
        console.log('Not found'); 
    
    }
}

如果找不到AJAX文件，

在ajax调用之后在DOM中查找元素

1 个答案: