jQuery .on() not binding to all future events

Question

I am trying to figure out why jQuery is not binding to all future 'click' events on my page. It only works the first time I do this. The AJAX request fires, and displays adds the correct data to the DOM, however any subsequent attempts do not fire. When I select a button 'View All Dealerships', the AJAX requests returns JSON array of the dealerships and displays them on the page.

$(function(){
  $("body").on("click", "#all-dealerships", function(e){
    let path = $(this).attr("href");

    $.ajax({
      url: path,
      dataType: 'json',
      success: function(response){
        var source = $("#dealerships-template").html()
        var template = Handlebars.compile(source)
        var result = template(response)
        var a = () => document.getElementsByTagName("body")[0].innerHTML = ""
        a()
        document.getElementsByTagName("body")[0].innerHTML += result
        }
    })
    e.preventDefault()
  })
})

The variable names and structure is just for testing. Body is a static element that does not change. I tried wrapping the button in a div and using that as the parent object that binds the event, however I get the same result. The page loads just not with AJAX. The event only gets bound when I do a full page refresh. Navigating to other pages on the site does not fix the problem.

The button that triggers the AJAX request is not present when the new elements are added to the DOM. It gets removed. The action of navigating back to that button does not re-trigger the click event.

why are you replacing the whole content like this? Just replace the bit of the page that actually needs replacing. Then you don't need to worry about re-binding buttons. But in theory this code should really work ok, unless perhaps the button returned in your request does not have the same ID as the original, or something. Hard to know without seeing the HTML. — ADyson, Feb 26 '18 at 12:05
Although you could simplify `var a = () => document.getElementsByTagName("body")[0].innerHTML = "" a() document.getElementsByTagName("body")[0].innerHTML += result` to just `document.getElementsByTagName("body")[0].innerHTML = result` . Not sure what the extra stuff was for? — ADyson, Feb 26 '18 at 12:09
I removed the extra stuff and your suggestion worked only for the initial request. Subsequent ones are not working via ajax. — O.MeeKoh, Feb 26 '18 at 12:37
Even if I were to just append the result html to the existing page without clearing it, I cannot repeat the subsequent ajax requests. After the HTML is successfully appended to the existing page, when I navigate to other links and come back, clicking on the button does not fire another ajax request. — O.MeeKoh, Feb 26 '18 at 12:46

score 0 · Answer 1 · answered Feb 26 '18 at 12:05

0

What you are doing is

You are binding an event and in ajax call you are removing all elements inside the body, however it may be possible that dummy 'div' element can be present in DOM.

So due to this and you binded an event on id (which binds event only on one element) your click is not triggered

So what you have to do is,

Insted of

document.getElementsByTagName("body")[0].innerHTML = ""

AND

 document.getElementsByTagName("body")[0].innerHTML += result

Do this

$('body').empty();

AND

$("body").html(result);

this will make sure that all elements inside the the body will be removed.

answered Feb 26 '18 at 12:05

Kiran Shinde

5,732
4
24
41

"it may be possible that dummy 'div' element can be present in DOM." what on earth do you mean by this exactly? – ADyson Feb 26 '18 at 12:08
I added main element where all the views get rendered. I left the .on() event binding code the same, and replaced the body empty call with the $('main').empty() and $('main').html(results). This works like before, the initial request goes through successfully via AJAX, subsequent requests are not. Thank Ill keep trying! – O.MeeKoh Feb 26 '18 at 12:31

score 0 · Answer 2 · answered Feb 26 '18 at 13:04

What ended up fixing my problem was changing the event bind to $(document).on(...) instead of $('body').on(...)

When the new HTML content was appended to the DOM the button that triggered the AJAX request was no longer available. Navigating back to the page where the button existed did not trigger the event bound to the body element. Targeting the document ensured that the event would re-fire each time.

Does AJAX loaded content get a "document.ready"?

jQuery .on() not binding to all future events

2 Answers2