Question

我正在更新一份有两年历史的应用程序，该应用程序的一部分有以下内容：

function setupListener(currentXmlHttpRequests){
  debugger;
  $(document).unbind("DOMNodeInserted");
  $(document).bind("DOMNodeInserted", function(e){
    debugger;
    console.log(e.currentTarget.id);
    if(e.target.id=="page-bottom"){
      refreshFilterList("Last 6 Months Of Launches");
      refreshQuickJump(filtered);
      $("#mySelect").on('change', function() {
        var val = this.value;
        if(val == "")
          return;
        document.getElementById(val).scrollIntoView();
        var element = document.getElementById('mySelect');
        element.value = "";

      });
      $("#datacenter").SumoSelect({placeholder: "All Datacenters"});
      $("#year").SumoSelect({placeholder: "All Years"});
      $("#platform").SumoSelect({placeholder: "All Platforms"});
      $("#tech").SumoSelect({placeholder: "No Technologies"});
      $("#tech")[0].sumo.selectItem(1);
      $("#tech")[0].sumo.selectItem(2);
      $("#tech")[0].sumo.selectItem(3);
      $("#version").SumoSelect({placeholder: "All Versions"});
      $("#query").keyup(function(e) {
        if(e.keyCode == 13) {
          setFilters();
          changeURL(scriptName);
          if(checkFiltersDefault())
            loadDefault();
          else
            filter(filteredServiceNames[env], true);
          refresh(currentXmlHttpRequests);
        }
      });
      $("#search").on("click", function(){
        setFilters();
        changeURL(scriptName);
        if(checkFiltersDefault())
          loadDefault();
        else
          filter(filteredServiceNames[env], true);
        refresh(currentXmlHttpRequests);
      });
      $("#clear").on("click", function(){
        clearFilters();
        changeURL(scriptName);
        loadDefault();
        refresh(currentXmlHttpRequests);
      });
    }
  });
}

但是输入后，e.currentTarget始终为#document，e.target.id始终为空。这导致听众永远不会被应用。

page-bottom在此之前设置了另一种方法：

function setupLast(dashboard) {
    dashboard.rows.push({
        title: 'Chart',
        height: 25,
        editable: false,
        panels: [{
            title: ' ',
            type: 'text',
            span: 0,
            mode: 'html',
            content: "<!DOCTYPE html><html><body><div id=\"page-bottom\"  style=clear:both></div></body></html>",
            height: 25,
            transparent: true,
            id: -1
        }]
    });
}

写这个的人最初插入这个div作为我们在页面加载完成时观察的方式。他的老文档有：

大多数仪表板都有一个隐藏的面板，在最后添加仪表板，用于了解何时可以安全执行 jquery事件绑定等等。这通过使用jquery来工作 'DOMNodeInsert'事件等待面板内的div添加到页面。

我不确定问题是什么 - 如果基础应用程序升级（升级2年）它升级了jquery版本，或者我只是遗漏了什么。我可以看到page-bottom确实最终出现在页面中。当页面加载时，这些监听器设置永远不会被执行。

Answer 1

我会取消div检测机制并使用jQuery api方法：

$(document).ready(function() {
  refreshFilterList("Last 6 Months Of Launches");
  refreshQuickJump(filtered);
  $("#mySelect").on('change', function() {
    var val = this.value;
    if(val == "")
      return;
    document.getElementById(val).scrollIntoView();
    var element = document.getElementById('mySelect');
    element.value = "";

  });
  $("#datacenter").SumoSelect({placeholder: "All Datacenters"});
  $("#year").SumoSelect({placeholder: "All Years"});
  $("#platform").SumoSelect({placeholder: "All Platforms"});
  $("#tech").SumoSelect({placeholder: "No Technologies"});
  $("#tech")[0].sumo.selectItem(1);
  $("#tech")[0].sumo.selectItem(2);
  $("#tech")[0].sumo.selectItem(3);
  $("#version").SumoSelect({placeholder: "All Versions"});
  $("#query").keyup(function(e) {
    if(e.keyCode == 13) {
      setFilters();
      changeURL(scriptName);
      if(checkFiltersDefault())
        loadDefault();
      else
        filter(filteredServiceNames[env], true);
      refresh(currentXmlHttpRequests);
    }
  });
  $("#search").on("click", function(){
    setFilters();
    changeURL(scriptName);
    if(checkFiltersDefault())
      loadDefault();
    else
      filter(filteredServiceNames[env], true);
    refresh(currentXmlHttpRequests);
  });
  $("#clear").on("click", function(){
    clearFilters();
    changeURL(scriptName);
    loadDefault();
    refresh(currentXmlHttpRequests);
  });
});

Answer 2

尝试使用e.target代替currentTarget

.on（“DOMNodeInserted”，function（e）{，e.currentTarget总是#document

2 个答案: