Слушатель события mootools исчезает после изменения element.innerHTML - PullRequest
Новая
       8

Слушатель события mootools исчезает после изменения element.innerHTML

1 голос
/ 10 апреля 2010

Я составляю страницу, которая будет отображать набор сохраненных значений. Я использую mootools и AJAX-вызовы для обновления значений без необходимости обновлять страницу каждый раз, когда пользователь выбирает новый элемент из выпадающего меню.

HTML каждая строка выглядит примерно так: 

<div class="selections">
<input class="checkbox selector" type="checkbox" CHECKED />

<span class="b_name">
    <select class="b_n selector">
        <!-- options -->
    </select>
</span>

<span class="b_level">

    <select class="b_l selector">
        <!-- options -->
    </select>

</span>

<span class="values">
    <!-- the values -->
</span>

В голове я настроил прослушиватель событий вроде: 

    $$('.selector').addEvent('change', function(event){changeValues(this);});

Моя проблема в том, что при изменении выбора "b_name" мне нужно обновить список опций в выборе "b_level". Я добиваюсь этого, получая список возможных опций из моей базы данных через скрипт php на другой странице и заменяя innerHTML "b_level". Как только я это сделаю, прослушиватель событий, прикрепленный к «селектору b_l», больше не работает.

Я попытался решить эту проблему, явно подключив прослушиватель событий к «селектору b_l» каждый раз, когда «b_name» изменяется следующим образом: 

    row.getElement('.b_l').addEvent('change', function(event){changeValues(row.getElement('.b_l'));});

где 'row' - это HTML-элемент 'div.selections'.

Это все еще не работает, и я понятия не имею, что происходит. Может кто-нибудь предложить предложение относительно того, как я могу решить эту проблему? или, возможно, лучший способ сделать то, что я делаю.

Спасибо

Ответы [ 3 ]

2 голосов
/ 10 апреля 2010

Так работает JavaScript, это , а не ошибка .

Вам необходимо использовать Делегирование элемента - вы присоединяете событие к родительскому элементу, одновременно указав элемент, которому должно быть делегировано событие.

Вот базовый пример делегирования элемента в действии: http://jsfiddle.net/oskar/ENR3E/

И документация : http://mootools.net/docs/more/Element/Element.Delegation

1 голос
/ 10 апреля 2010

Когда вы устанавливаете innerHTML для элемента, содержимое элемента полностью очищается и заменяется новым набором элементов - тех, которые анализируются из свойства innerHTML. Любые события, установленные для старых элементов, не будут применяться к новым.

jQuery предоставляет решение этой проблемы с live() событиями. Я нашел решение здесь , которое, по-видимому, достигает того же с mootools.

0 голосов
/ 10 апреля 2010

Ваш подход верный, возможно, в вашем addEvent() коде просто ошибка. Причина, по которой обработчик событий исчезает при замене innerHTML, достаточно проста: вы удаляете элементы, на которых работают обработчики, поэтому и обработчики также удаляются. Но ваш подход к повторному добавлению обработчика должен работать.

Я думаю, возможно, это проблема с областью видимости. Что произойдет, если вы явно ссылаетесь на div, например: 

row.getElement('.b_l').addEvent('change', function(event){
{
  changeValues($$('div.selections .b_l'));
});
...