Добавьте прослушиватель событий к объекту, который добавляется в DOM через AJAX - PullRequest
Новая
       23

Добавьте прослушиватель событий к объекту, который добавляется в DOM через AJAX

1 голос
/ 27 сентября 2010

У меня есть набор флажков, которые добавляются в документ с помощью вызова 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 работает отлично.

К сожалению, если я попытаюсь каким-либо образом вызвать метод "$$" ПОСЛЕ добавления флажков в DOM через AJAX, ни одному из них не удастся подобрать прослушиватель событий.

ТАК ... кто-нибудь знает, как заставить прототип перечитать текущее состояние DOM? (или любой другой обходной путь, который вы можете придумать)

Я попытался поместить $$ в функцию и вызвать ее как часть обратного вызова onSuccess, как отдельную функцию после выполнения вызова ajax и вывода всей функции $$ как части фактических значений AJAX. Все безрезультатно.

Помощь очень ценится.

1 Ответ

0 голосов
/ 27 сентября 2010

на самом деле было невероятно легко. 

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страница в конце всего.

...