Home/ Questions/Q 6335811
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T18:55:45+00:00

I’ve got a button that displays HI when clicked. The button is in a

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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