Search code examples
javascriptajaxprototypejs

Click Event Not Working After Ajax Content Added

Basically, I have a page which on page loading fetches Ajax content. The lightbox (which is unrelated to the ajax content) has Event.observe click events that stop working when the ajax products are loaded. I can get this to work with jQuery's .live method but am not familiar with Prototype.

SAMPLE NOT WORKING CLICK EVENT:

Event.observe('closeLink', 'click', function () {  
    RunSomeFuntion.close();          
    ClearAll();  
});

How do I get the events (see above) to remain functional using Prototype, even if Ajax content is added on page load.

Solution

  • Event delegation is the solution. Use on. See http://prototypejs.org/learn/event-delegation.

    $('ancestorID').on('click', '.closeLink', function(event, element) {
    var clickedLink = event.element;
    RunSomeFuntion.close();
    ClearAll();
});