CODEWITHSUNDEEP
jqueryajaxlive
Yovo
Yovo

Reputation: 629

Jquery ajax problem

I have a clickable map of country which is loaded on document ready.

    $(document).ready(function bg() {
        $.ajaxSetup ({cache: false,timeout: 5000});     
        $("#map").load("/maps/country.php",function() {
    $('.map').maphilight({SOME SETTINGS HERE});     
    });
});

When I click on city it triggers the ajax function which loads the city file to the #map div rebinding bunch of javascript for checkboxes maphover etc...

$("#map").load("/maps/cityc_maps.php", function() {

        //JAVASCRIPT NEEDED HERE!

 });

The problem that I am having is when I load the city map into the div (with ajax), I'd like to have my script rebind the scripts (and highlight that portion of the map).

$("#map").load("/maps/cityc_maps.php", function() {

        //JAVASCRIPT NEEDED HERE!

 $("#CountryLink").load("/maps/country.php",function() {
  $('.map').maphilight({SOME SETTINGS HERE});
    //AND HERE WHEN USER CLICK CITY MAP when file load
 });

 });

It's very confusing but I hope someone will understand me. I think the solution is reloading the page but I hope there is way to make it with ajax.

Upvotes: 0

Views: 133

Answers (1)

marcosfromero
marcosfromero

Reputation: 2853

If you are willing to bind event handlers to elements inserted via AJAX, I think you should use live: http://api.jquery.com/live/

This way, you bind event handlers once in your JavaScript code and jQuery takes care of observing new bindable elements.

Upvotes: 1

Related Questions