JQuery Prototype барботирует с перезагрузкой Ajax - PullRequest
Новая
       4

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

0 голосов
/ 19 августа 2011

У меня есть кнопка, которая отображает «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>

Любой совет высоко ценится.

1 Ответ

0 голосов
/ 19 августа 2011

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

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

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

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().

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...