更新元素后如何維護事件觀察

Question

我正在開發一個項目，在該項目中，我會使用通過點擊事件觸發的原型在布局上放置一個具有默認結果集的搜索框。

設置輸出后，該新頁面將使用它自己的Javascript來動態過濾結果。

現在，新的結果集不適用於以前的Javascript集。

如何通過每次調用新事件來維護持久事件？ 還是那是我應該做的。

這是加載在“ loaded_pa​​ge.php”中的一些代碼

<script language="javascript">
    var o = new Compass_Modal('add_button', 'history');
    var placetabs = new Tabs('tabs', {
        className: 'tab',
        tabStyle: 'tab'
    });
    $$('.add_button').each(function(s, index){
        $(s).observe('click', function(f) {
            loadData();
        });
    });

    function loadData() {
        new Ajax.Request('/sponsors/search', {
            onComplete: function(r) {
                $('overlay').insert({
                    top:'<div id="search_table">'+r.responseText+'</div>'
                });
            }
        })
    }
</script>

然后在通過javascript插入的包含頁面中：

    <div id="search_overlay">
    <div id="form_box">
        <a href="javascript:void(null);"><img src="/images/closebox2.png" class="closebox" /></a>
        <form method="post" id="search_form" class="pageopt_left">
            <input type="text" name="search_box" id="search_box" value="search" />  
        </form>
    </div>
    <div id="table_overlay">
        <table class="sortable" id="nf_table" cellpadding="0" border="0" cellspacing="0"> 
<tr> 
<th id="name_th">Name</th><th id="amount_th">Amount</th><th id="tax_letter_th">Tax Letter</th><th id="date_th">Date</th><th id="add_th">Add</th></tr> 
<tr> 
<td>Abramowitz Foundation (The Kenneth & Nira)</td><td><input type="text" name="amount" value="" id="amount_111" /></td><td><input type="checkbox" name="tax_letter" value="1" id="tax_letter_111" /></td><td><input type="text" name="date" value="" id="date_111" /></td><td><a href="http://compass.krd.webhop.net/sponsors/add/111" class="add_button"><img src="/images/icons/add.png" title="add contact" /></a></td></tr> 
... more rows
</table>
    </div>
</div>    
<script language="javascript">
    var c = new Compass_Search('contacts', 'table_overlay');
    c.set_url('/sponsors/sponsor_search');
    $$('.add_button').each(function(s, index) {
        $(s).observe('click', function(e) {
            $(e).stop();

            var params = $(s).href.split("/");
            var userid = params[5];
            var amount = 'amount_'+params[5];
            var date    = 'date_'+params[5];
            var tax     =   'tax_letter_'+params[5];
            if(!Form.Element.present(amount) || !Form.Element.present(date)) {
                alert('your amount or date field is empty ');
            } else {
                var add_params =  {'amount':$F(amount), 'date':$F(date), 'tax':$F(tax), 'id':userid};
                if(isNaN (add_params.amount)) {
                    alert('amount needs to be a number');
                    return false;
                } else {
                    new Ajax.Request('/sponsors/add', {
                        method: 'post',
                        parameters: add_params,
                        onComplete: function(e) {
                            var post = e.responseText;
                            var line = 'amount_'+add_params.id;
                            $(line).up(1).remove();
                        }
                    })
                }
            }
        });
    });

    this.close = $$('.closebox').each(function(s, index) {
        $(s).observe('click', o.unloader.bindAsEventListener(this));
})
</script>

您會在插入的部分中注意到一個新的Javascript，該Javascript也用新的觀察者更新了自己的內容。 內容更新后，觀察者將無法使用。

Answer 1

使用事件委托 。

除了可以替換“觀察到的”元素之外，這種方法還更快 ， 存儲效率更高 。

document.observe('click', function(e){
  var el = e.findElement('.add_button');
  if (el) {
    // stop event, optionally
    e.stop();
    // do stuff... `el` now references clicked element
    loadData();
  }
});

Answer 2

當您調用Element＃insert時，我想應該自動調用String＃evalScripts（就像在那些方法的實現中一樣）

也許您可以嘗試在Element＃observe調用之前執行一些console.log（）/ alert（）消息，以查看問題出在哪里。 可能是因為根本沒有對Javascript進行評估，或者您的代碼有問題或類似問題。

提示：查看Array＃invoke上的文檔，使用該方法可以重寫如下內容：

$$('.add_button').each(function(s, index){
    $(s).observe('click', function(f) {
        loadData();
    });
});

到這個：

$$('.add_button').invoke('observe', 'click', function(event){
    loadData();
});
// $$('.add_button').invoke('observe', 'click', loadData);