javascript - 向通过 AJAX 添加到 DOM 的对象添加事件监听器

Question

我有一组复选框，可以通过 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 代码(使用原型(prototype))

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))
});

现在，如果页面加载时复选框位于页面上，则鼠标悬停技巧效果很好。

不幸的是，如果我在通过 AJAX 将复选框添加到 DOM 后尝试以任何方式调用“$$”方法，它们都无法获取其事件监听器。

SO ...有谁知道如何强制原型(prototype)重新读取 DOM 的当前状态？ (或您可能想到的任何其他解决方法)

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

非常感谢您的帮助。

Answer 1

实际上非常简单。

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 页面上所有内容的末尾。