事件没有触发位于iframe表中的按钮(没有jQuery)

Event is not firing on button located in a table in an iframe (no jQuery)

本文关键字：按钮 没有 jQuery iframe 事件      更新时间：2023-09-26

我必须在单击HTML表单中的添加按钮时显示一个旋转器，等待Ajax加载选择框中的内容。选择框位于iframe中。我已经建立了一个我试图在jsfiddle中实现的简化复制。有两张表，一张用于研究项目，另一张用于主要研究小组。这些表包含一个add图标。我想在点击研究项目的添加按钮时触发一个console.log。

我必须在选择器中使用父容器的名称，因为在用户界面中没有其他非文本标识符。我只想使用纯JavaScript，但如果jQuery或其他框架提供了解决方案，那么我也会这么做。

var formFrame = document.getElementById('form_iframe');
formFrame.src = "/catorarn/tabLe/24/show/";
var formFrameDoc = formFrame.contentDocument;
formFrame.onload = function() {
  //click event on add button
  var btn = getElementByXpath("//i[contains(@class,'fa fa-plus-circle') and ../../td/span[text()='Research project']]", formFrame);
  console.log('showSpinner === btn is ' + btn);
  addEvent(btn, 'click', function(e){
    console.log('inside event listener');
    e.stopPropagation();
   });
 };
function getElementByXpath(path, iframe) {
  console.log('iframe is ' + iframe );
  var doc = iframe.contentDocument;
  return doc.evaluate(path, doc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
function addEvent(elem, evnt, funct){
   if (elem.attachEvent){
     console.log('addEvent === attachEvent');
     return elem.attachEvent('on' + evnt, funct);
   } else {
     console.log('addEvent === addEventListener == elem is ' + elem );
     return elem.addEventListener(evnt, funct, false);
   }
  }

我在这里创建了一个小提琴来重现这个问题

当我在jsfiddle中单击Run时，事件根本没有在按钮上注册。为什么事件没有注册?

  var formFrame = document.getElementById('form_iframe');
  formFrame.src = "/catorarn/tabLe/29/show/";
  formFrame.onload = function() {
  var formFrameDoc = formFrame.contentDocument;
  //click event on add button
  var tables = formFrameDoc.getElementsByClassName('iw-formspub-container');
  var children ;
  for (var i = 0 ; i < tables.length; i++ ){
    children = tables[i].getElementsByTagName('*');
    for (var j = 0; j < children.length; j++ ){
      if( children[j].textContent === 'Research project' ){
         var btn = formFrameDoc.querySelector(".fa.fa-plus-circle");
         btn.addEventListener('click', function(){ console.log('finally'); });
       }   
    }
  }
};

我要使用的xpath选择器会很难看很复杂，比如

//i[contains(@class,'fa-plus-circle') and ../../../../../../../../../../../td/table/tbody/tr/td/span[contains(text(),'Research project')]]
相关文章：