小编典典

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请求提取所有客户联系数据。但是我认为这些信息对问题的描述并不重要。_


阅读 299

收藏
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