Question

该网站正在使用Prototype JS库。

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

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

我尝试使用document.observe('dom:loaded', function() { $('my-new-dynamic-element').hide(); })选择并隐藏它们，但此代码并未查看＆＃39;动态元素。

我看到Prototype有.on()方法，但我不确定在我的情况下我应该指定哪个事件？我尝试了事件＆＃39;加载＆＃39;但没有成功。

如果我能解决这个问题，我将不胜感激。

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

PS：我想在Magento Admin中隐藏一些地址元素 - ＆gt; ＆＃34;创建新订单＆＃34;页面，在加载主页面后，使用ajax请求拉取所有客户联系人数据。但我不认为这些信息对问题描述很重要。

Answer 1

如果您打算稍后再次显示它们，您可以将'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();
  });
});

每次修改页面时都会触发，因此如果内容与内部选择器匹配，则可以测试和隐藏内容。

Answer 2

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

例如

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

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

});

或者更复杂，如果你只想隐藏一个hb blob中的特定元素。您需要先将blob放在扩展元素中。这将隐藏所有<input>元素，其中address类是死者，（在您的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);

});

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

2 个答案: