JQuery Prototype пузырится с перезагрузкой Ajax

У меня есть кнопка, которая отображает "HI" при нажатии. Кнопка находится в div под названием «Panel1», для обновления которого я использую AJAX. После первого нажатия, когда Panel1 перезагружается, нажатие кнопки даже больше не срабатывает. Я предполагаю, что это связано с всплытием событий... но я просто не могу решить эту проблему за последние 3 дня. Пример кода выглядит следующим образом: -

<script language="JavaScript" type="text/javascript">
document.observe("dom:loaded", function() { 
    $$("#ShowDialog").invoke('observe', 'click', function() {
        alert("HI");
        AjaxPanel.reload($("Panel1"));
    });
</script>
</head>
<body>
<div id="Panel1">
    .
    .
    .
    <input name="btnAdd" type="submit" value="Add" id="ShowDialog">
</div>
</body>
</html>

Любой совет глубоко ценится.


php ajax reload prototypejs
person Dinesh    schedule 19.08.2011    source источник
comment
Я удалил свой ответ и добавил PHP в ваши теги.   -  person griegs    schedule 19.08.2011
comment
Я не так хорошо знаком с Prototype, но я предполагаю, что вы прикрепляете прослушиватель событий к #ShowDialog, но затем AJAX изменяет #Panel1 innerHTML или что-то в этом роде, что означает, что технически #ShowDialog на самом деле будет новым <input> без прослушивателя событий. . Это имело какой-то смысл? В любом случае, если это так, то решение состоит в том, чтобы использовать делегирование событий вместо прослушивателя событий. Но я определенно недостаточно знаю о Prototype, чтобы рассказать вам, как это можно сделать.   -  person sdleihssirhc    schedule 19.08.2011
comment
Вы используете jQuery или Prototype? Или оба? Невозможно сказать это по заголовку вопроса и коду, и ответ зависит от этого.   -  person J0HN    schedule 19.08.2011

Ответы (1)


arrow_upward
0
arrow_downward

Вы заменяете все содержимое Panel1, включая кнопку, к которой прикреплен прослушиватель событий.

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

Я не знаю, какой «класс» AjaxPanel вы используете, но вот как я бы сделал это с прямым Prototype

function observeButton() {
    // The $$() function returns an array, but here we're looking for 1 specific
    // element, so the standard $() function is the one to use. No need to mess
    // with the invoke() method and all that
    $('ShowDialog').observe('click', function(event) {
        alert('Hi!');
        new Ajax.Updater('Panel1', url, { // you'll need to define "url"
            // onComplete is called after the element has been
            // updated so this new call to observeButton() will
            // attach a listener to the *new* button
            onComplete: observeButton 
        });
    });
}

document.observe('dom:loaded', function() {
    observeButton();
});

Кроме того, вы можете просто поместить кнопку снаружи панели, чтобы она не заменялась. Или вы можете использовать jQuery и метод .live().

person Flambino    schedule 19.08.2011
comment
Я загружаю и jquery, и прототип. По какой-то неизвестной мне причине .live не работает (...и все это время я думал, что .live был частью прототипа). AjaxPanel, который я использую, был создан для CodeCharge, и поэтому я не могу использовать onComplete (или, возможно, не знаю). Ваше объяснение и код выше вызвали идею. Я нашел ответ в stackoverflow.com/questions/1537926/ - person Dinesh; 19.08.2011
comment
@Динеш: Хорошо. Не стесняйтесь ставить галочку возле моего ответа, если хотите - person Flambino; 19.08.2011
comment
Спасибо, Фламбино. Вы очень помогли. - person Dinesh; 20.08.2011