Home/ Questions/Q 8769475
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T17:21:28+00:00

Possible Duplicate: javascript not working in the new part when loading a new part

  • 0

Possible Duplicate:
javascript not working in the new part when loading a new part using jquery and HTML 5

I loaded another HTML page into a div of the main HTML page using Ajax. The page loaded fine, but when I try to apply jQUery to the loaded page, nothing works.

$('.mainDiv').click(function(ev) {
    ev.preventDefault();
    var url = $(this).attr('href');
    $('.secondDiv').load('http://127.0.0.1:8000'+url);
});

I tried using a simple alert function called on all links to see if it works, but the alert appears only on the main page links, even though the .js file is linked to both pages. 

$('a').click(function(){
    alert('hey');
});

How can I fix this? Would using .live() or .on() instead of .load() fix the problem?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using $('body').on('click', 'a', function(event){...}) would work.

    Because on is called on the <body> you don’t need to worry about the event getting wiped out when you load in new content.

    If you would like to scope this event on a specific set of anchors I would suggest name spacing with a class in the second parameter using something like 

    $('body').on('click', '.mainDiv .secondDiv a', function(event){...})

    By setting this once in a bootstrap you can reduce a lot of complexity within your code. Now all you need to do is load in the content; there is no need to define a callback inline as you’ve extracted out the event logic.

    $('a').on(...) will not work as the DOM element it’s bound to may get wiped out, or is not on the page at the time of the call. The 2nd parameter of the on call is used to reference any new elements appearing under the root element (body in this case).

    • 0