Прослушиватель событий MooTools исчезает после изменения element.innerHTML - PullRequest
Новая
       5

Прослушиватель событий MooTools исчезает после изменения element.innerHTML

3 голосов
/ 18 мая 2010

Я пытаюсь решить эту задачу с помощью MooTools.

Описание:

Я прикрепил прослушиватель событий к ссылке myButton. Щелчок по этой ссылке инициирует запрос AJAX и обновляет содержимое myDiv на основе текста ответа.

Во время этого запроса переменная POST отправляется в «button.php», но в данный момент она не используется.
(я хочу использовать ее позже)

ОК, в результате myDiv получает точно такую ​​же ссылку с тем же идентификатором (myButton) + случайное число, чтобы мы могли видеть, что каждый щелчок генерирует новое число.

Проблема:

После первого нажатия на myButton, myDiv обновляется корректно, показывая случайное число. Когда я нажимаю myButton во второй раз (на этот раз в недавно обновленном div), div больше не обновляется.

Обратите внимание, что мне нужно myButton, чтобы быть внутри myDiv, и myDiv должен обновляться (обновляться) после каждого клика без необходимости обновлять всю страницу.

Может кто-нибудь показать мне, как решить эту задачу на основе этого упрощенного примера кода?

index.html 

<html>
<head>
<script type="text/javascript" src="mootools-1.2.4-core-nc.js"></script>
<script>
window.addEvent('domready', function() {
  $('myButton').addEvent('click', function(e) {
    e.stop();
    var myRequest = new Request({
      method: 'post',
      url: 'button.php',
      data: {
        action : 'test'
      },
      onRequest: function() {
        $('myDiv').innerHTML = '<img src="images/loading.gif" />';
      },
      onComplete: function(response) {
        $('myDiv').innerHTML = response;
      }
    });
    myRequest.send();
    $('myButton').removeEvent('click');
  });
});
</script>
</head>
<body>
  <div id="myDiv">
    <a id="myButton" href="#">Button</a>
  </div>
</body>
</html>

button.php 

<a id="myButton" href="#">Button</a> clicked <?php echo rand(1,100); ?>

Ответы [ 2 ]

2 голосов
/ 18 мая 2010

Посмотрите на Element.Delegation , чтобы настроить событие в контейнере myDiv один раз, чтобы вам не приходилось повторно подключать обработчики при каждом обновлении содержимого. Вам нужно включить это расширение MooTools-More в свои скрипты, так как оно еще не является частью ядра, но будет начиная с версии 1.3. 

$("myDiv").addEvent("click:relay(a)", function() {
    ...
);

Если у вас есть несколько ссылок <a> внутри, и вы хотите делегировать только определенное их подмножество, добавьте класс или другое свойство, чтобы различать их. Вы можете использовать практически любой селектор внутри relay(..). Допустим, все ссылки имеют добавленный класс updateTrigger: 

<a class="updateTrigger" id="myButton" href="#">Button</a>

тогда синтаксис будет: 

$("myDiv").addEvent("click:relay(a.updateTrigger)", function() {
    ...
});

См. Этот рабочий пример , где ссылки заменяются каждые 5 секунд. В контейнере myDiv имеется только одна настройка события, и он обрабатывает все клики для всех <a> с, даже динамических.

1 голос
/ 18 мая 2010

вы присоединяете событие к заменяемому элементу. Дом не может знать, что для вас старая и новая кнопки идентичны. Старая кнопка удаляется (и слушатель событий вместе с ней), а новая кнопка создается. Таким образом, вам нужно повторно прикрепить событие к новой кнопке.

Это говорит: почему кнопка должна быть внутри div? Разум поражает. Вы всегда можете обновить текст кнопки из javascript, нет необходимости заменять ее и продолжать создавать новые объекты слушателя.

...