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

Question

该网站正在使用 Prototype JS 库。

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

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

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

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

如果有任何提示可以解决这个问题，我将不胜感激。

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

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

Answer 1

我会在 Ajax 请求成功回调中执行 .hide()。如果您是动态创建元素，则可以在将它们插入 DOM 之前对其进行操作。

例如

new Ajax.Request('/myurl',{'onSuccess':function(result){
    var t = new Element('div').update(result.responseText).hide();

    $$('body')[0].insert(t);

});

或者更复杂，如果你只想隐藏一个 html 中的特定元素。您需要先将 blob 放入扩展元素中。这将隐藏所有具有 address 类的 <input> 元素，它们是死者（在您的 blob 中，而不是整个 DOM 中）。

new Ajax.Request('/myurl',{'onSuccess':function(result){
    var t = new Element('div').update(result.responseText);

    t.select('input.address').invoke('hide');

    $$('body')[0].insert(t.innerHTML);

});

Answer 2

如果您打算稍后再次显示它们，您可以将 'style="display:none"' 添加到创建您要插入的 HTML 的任何内容（换句话说，/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');
});

这是一个相当广泛的选择器，您可以使用 next 和 previous 或 id 选择器来做更具体的事情。 on() 方法的要点是，在事件发生之前不会评估其闭包的内容，因此您可以依赖与评估时找到的选择器匹配的所有内容，无论它是在页面加载时出现还是被添加稍后。

如果您只想隐藏正在添加到页面的内容，并且想要一个完全不可知的方法，您可以试试这个：

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

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