Question

点击时我有一个显示“HI”的按钮。该按钮位于名为“Panel1”的div中，我正在使用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>

非常感谢任何建议。

Answer 1

您正在替换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()方法。

JQuery Prototype冒泡与Ajax重新加载

1 个答案: