将事件侦听器添加到通过AJAX添加到DOM的对象

时间:2010-09-27 17:00:00

标签: ajax events dom javascript-events prototypejs

我有一组通过Ajax调用添加到文档中的复选框

<input type='checkbox' checked class='import'>
<input type='checkbox' checked class='import'>
<input type='checkbox' checked class='import'>
<input type='checkbox' checked class='import'>
<input type='checkbox' checked class='import'>

我有一些javascript(使用原型)

function check_toggle(obj, e) {
    if   (e.shiftKey)   {obj.checked=!obj.checked;}
    else if (e.altKey)  {obj.checked=true;}
    else if (e.ctrlKey)    {obj.checked=false;}
}
$$('.import').each(function(obj){
    Event.observe(obj, "mouseover", function(e){alert('here');}.bind(this))
});

现在,如果页面加载时页面上有复选框,则mousover技巧效果很好。

不幸的是,如果我尝试通过AJAX将复选框添加到DOM之后以任何方式调用“$$”方法,那么他们都没有设法选择他们的事件监听器。

所以...有没有人知道如何强制原型重新读取DOM的当前状态? (或您可能想到的任何其他解决方法)

我已经尝试将$$放在一个函数中并将其作为onSuccess回调的一部分调用,作为ajax调用之后的单独函数,并将整个$$函数作为实际AJAX值的一部分输出。一切都无济于事。

非常感谢帮助。

1 个答案:

答案 0 :(得分:0)

实际上非常简单。

function ajax_load_keyset(obj) {
    url             = '/myurl.html';
    params          = 'id='+obj.value;
    new Ajax.Updater(   'checks_go_here',
                    url, {
                    method:'post',
                    parameters:params,
                    evalScripts: true,   // this line must be present   
                    onSuccess:  function(result){}
                });
}

结果我只需要将 evalScripts:true 添加到ajax调用中,然后将$$函数放在/myurl.html页面的所有内容的末尾。