PrototypeJS：如何选择动态创建的元素呢？ [英] PrototypeJS: how to select dynamically created elements?

问题描述

该网站使用Prototype JS库。

The website is using Prototype JS library.

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

After page loads, it immediately executes Ajax request, which pulls out and displays more elements for the page.

我需要能够选择那些动态创建的元素和 .hide隐藏起来（）方法。

I need to be able to select those dynamically created elements and hide them with .hide() method.

我曾尝试选择并使用 document.observe（DOM：加载隐藏起来，函数（）{$（我的新动力元素）隐藏（）;} ），但这code不'看'的动感元素。

I have tried to select and hide them using document.observe('dom:loaded', function() { $('my-new-dynamic-element').hide(); }), but this code does not 'see' the dynamic elements.

我看到原型有 。对（） 的方法，但我不知道我应该在我的情况下，指定哪些事件？我试着事件'负荷'，但没有成功。

I saw Prototype has .on() method, but I am not sure which Event should I specify in my case? I tried Event 'load', but no success.

我会AP preciate任何提示我怎么能解决这个问题。

I would appreciate any tips how I could solve this problem.

更新：的我要做到这一点，在Magento的CMS后台，所以我不能，或更好 - 我不希望修改原来的Magento的JavaScript codeS和Ajax请求HTML输出。所以，我需要通过添加这是使用PrototypeJS选择上动态发布元素额外的自定义JavaScript code做到这一点。他们需要被隐藏，并且永远不会再次显示。我希望有一个简单的几本线的解决方案。

UPDATE: I need to accomplish this in the Magento CMS backend, so I cannot, or better - I do not want to modify original Magento javascript codes and ajax request HTML output. So I need to accomplish this by adding extra custom Javascript code which is using PrototypeJS selectors on dynamically published elements. They need to be hidden, and never shown again. I hope there is a simple couple of lines solution for this.

PS：我试图隐藏Magento管理某些地址元素 - >创建新订单页面，在这里所有的客户接触的数据被拉到与Ajax请求加载主页面后。但我不认为这些信息对问题的描述很重要的。的

推荐答案

如果你打算稍后再向他们展示，你可以添加风格=显示：无到任何创建你插入HTML （函数后面/ myurl，换句话说），然后就可以简单地在后面延期听者显示这些元件，例如由上（）方法创建的那些。

If you're planning to show them again later, you could add the 'style="display:none"' to whatever creates the HTML you're inserting (the function behind /myurl, in other words), then you can simply show these elements later in a deferred listener, such as the ones created by the on() method.

// /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选择器代替。的对（）方法的一点是，它的关闭的内容不会被评估，直到事件发生，所以你可以依靠的选择相匹配的一切被人发现，当它评估的，不管是有在页面加载或加入更高版本。

That's a fairly broad selector, you could do something much more specific using next and previous or an id selector instead. The point of the on() method is that the contents of its closure are not evaluated until the event happens, so you can rely on everything that matches the selector being found when it is evaluated, whether it was there at page load or was added later.

如果你只想隐藏被添加到页面的东西，你想要一个完全无关的方法，你可以试试这个：

If you just want to hide the things that are being added to the page, and you want a completely agnostic method, you can try this:

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

这将触发页面每次修改，因此您可以测试和隐藏的东西，因为它们增加它们是否匹配你内心的选择。

That will fire each time the page is modified, so you can test and hide things as they are added if they match your inner selector.

这篇关于PrototypeJS：如何选择动态创建的元素呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！