0

I'm using jQuery .load() to include some HTML in my page. The content is shown as expected but all the events bounds to the included HTML aren't working

$('.main').empty().load("foo.html");
$(function() {
  $('select').on('change', function(){
    alert('bar');
  });
});

It works on desktop but not on mobile. I cannot figure out why... I suppose that the load() function is responsible for that, because as soon as I put the HTML content directly in the main page, it works...

katsele
  • 65
  • 10

1 Answers1

2

According to the docs, you will need to leverage the complete callback to know when the HTML is finished loading. Because this operation is asynchronous, you need to wait for it to complete before attempting to attach event handlers to DOM elements that have not been loaded yet.

$('.main').empty().load("foo.html", function complete() {
  $('select').on('change', function(){
    alert('bar');
  });
});
idream1nC0de
  • 1,171
  • 5
  • 13