Ajax 调用后的新观察者原型答案

【问题标题】：Prototype New Observer after Ajax CallAjax 调用后的新观察者原型
【发布时间】：2014-04-07 22:35:07
【问题描述】：

我在一个部分中有两个 Prototype JS 观察者，根据其他用户操作可能会改变内容，但不会改变 div 的结构。问题是包含这两个元素的 div 通过 ajax 调用 () 动态变化。因此我的代码只能工作一次，并且在 ajax 调用 (new Ajax.Request(url, {parameters...) 之后，即使元素具有相同的类名、div 结构等，一切都会停止工作。

更具体地说，这是我所拥有的：

<!-- COD Hck -->
<script type="text/javascript">
$$('.pm_cashondelivery').invoke('on','click','.pm_cashondelivery', function(event, el){
    $('id_flatrate_flatrate').setStyle({'display': 'block'});
    $$('.metodose').each(
                        function(elem){
                            elem.checked=false;
                        });

    $('s_method_flatrate_flatrate').checked=true;

    $$('.mayor').each(
        function(elem){
            elem.setStyle({'display': 'none'})
        });

});

$$('.metrest').invoke('on', 'click','.metrest', function(event, el){
    $('id_flatrate_flatrate').setStyle({'display': 'none'});
    $$('.metodose').each(
                        function(elem){
                            elem.checked=false;
                        });

    $$('.mayor').each(
        function(elem){
            elem.setStyle({'display': 'block'})
        });

    $$('.mayor input').each(

                        function(elem){
                            setTimeout(function(){
                                elem.setAttribute('checked',true);
                                },1);
                            elem.checked=true;//Check double time due Chrome bug
                        });
});
</script>

第一个观察者是：$$('.pm_cashondelivery').invoke('on','click','.pm_cashondelivery', function(event, el){。第二个观察者是 $$('.metrest').invoke('on', 'click','.metrest', function(event, el){ 。即使在同一个 div 中的 ajax 调用之后，我也需要这些观察者仍在工作。任何形式的帮助将不胜感激。

里卡多

【问题讨论】：

标签： javascript html css ajax prototypejs

【解决方案1】：

如果 div.pm_cashondelivery 和 div.metrest 元素随着每个 Ajax 请求而重新创建，那么您需要在文档树的更上方找到一个元素以将您的委托事件处理程序附加到。

例如：

$(document).on("click", ".pm_cashondelivery", function(event) {
    // ...
});

$(document).on("click", ".metrest", function(event) {
    // ...
});

【讨论】：