JQuery Prototype 通过 Ajax 重新加载冒泡

发布于 2024-11-30 08:56:37 字数 610 浏览 0 评论 0原文

我有一个按钮，单击时显示“HI”。该按钮位于名为“Panel1”的 div 中，我使用 AJAX 对其进行更新。第一次点击后，当Panel1重新加载时，按钮的点击甚至不再触发。我想这与事件冒泡有关...但我在过去三天似乎无法解决它。示例代码如下：-

<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>

非常感谢任何建议。

原文

I've got a button that displays "HI" when clicked. The button is in a div called "Panel1", which I'm using AJAX to update. After clicking for the first time, when Panel1 is reloaded, the button's click even does not fire anymore. I guess this has to do with event bubbling... but I just can't seem to solve it for the last 3 days. Sample code is as follows:-

<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>

Any advice is deeply appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

拍不死你 2024-12-07 08:56:37

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

You're replacing the entire contents of Panel1, including the button that the event listener is attached to.

So when the window first loads, the event listener is correctly attached. But when the ajax request replaces the content of the div, the button disappears too. Even if the new content has a similar button, it (the new button) won't have an event listener attached.

I don't know the AjaxPanel "class" you're using, but here's how I'd do it with straight 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();
});

Alternatively, you can just put the button outside the panel, so it doesn't get replaced. Or you can use jQuery, and the .live() method.

回复收藏 0 原文

~没有更多了~