PrototypeJS：如何选择动态创建的元素？

一尘不染

PrototypeJS：如何选择动态创建的元素？

ajax

该网站正在使用Prototype JS库。

页面加载后，它立即执行Ajax请求，该请求会拉出并显示页面的更多元素。

我需要能够选择那些动态创建的元素并使用.hide()method 隐藏它们。

我尝试使用选择和隐藏它们document.observe('dom:loaded', function() { $('my-new-dynamic- element').hide(); })，但是这段代码没有“看到”动态元素。

我看到Prototype有.on()方法，但是我不确定应该为我指定哪个Event？我尝试了事件“加载”，但没有成功。

我将不胜感激如何解决此问题的任何提示。

更新： 我需要在Magento CMS后端中完成此操作，所以我不能或者更好-我不想修改原始的Magento
javascript代码和Ajax请求HTML输出。因此，我需要通过添加额外的自定义Javascript代码（在动态发布的元素上使用PrototypeJS选择器）来实现此目的。它们需要隐藏，并且不再显示。我希望对此有一个简单的解决方案。

_PS：我试图在Magento Admin-

“创建新订单”页面中隐藏一些地址元素，该页面在加载主页后通过ajax请求提取所有客户联系数据。但是我认为这些信息对问题的描述并不重要。_

阅读 272

2020-07-26

共1个答案

一尘不染

如果您打算稍后再次显示它们，则可以在创建要插入的HTML的任何内容中添加“ style =“ display：none””（换句话说，就是/
myurl之后的函数），然后您可以简单地显示稍后在延迟的侦听器中使用这些元素，例如on（）方法创建的元素。

// /myurl => '<input type="text" class="foo" style="display:none">'

// later, in the combined page
document.on('click', '.some-control', function(evt, elm){
  evt.stop();
  $$('.foo').invoke('show');
});

那是一个相当广泛的选择器，您可以使用下一个和上一个或一个id选择器来做更具体的事情。on（）方法的要点是，直到事件发生时才评估其闭包的内容，因此您可以依赖于在评估时找到的与选择器匹配的所有内容，无论它是在页面加载时还是在页面加载时添加后来。

如果您只想隐藏要添加到页面中的内容，并且想要一个完全不可知的方法，则可以尝试以下操作：

document.on('DOMSubtreeModified', function(evt){
  $$('.some-selector-here').each(function(elm){
    if(elm.visible()) elm.hide();
  });
});

每次修改页面时都会触发，因此如果它们与您的内部选择器匹配，则可以在添加时测试并隐藏它们。

2020-07-26