CODEWITHSUNDEEP
javascriptjquery
Nistor Alexandru
Nistor Alexandru

Reputation: 5393

jQuery click event handlers don't work after loading html page with load()

Hi I am loading several html pages on an index page depending on what link was clicked.I have a problem with the links that have asocietted click event handlers.It seems that after the jQuery loads the html file the links in that html do not have there click event handlers binded to them. Here is my code:

This is the html for one of the links that does not work:

<a href="#" id="NavContactPage" data-sectionId="Skills">skills</a>

This is the jquery code asocieted with it:

$("nav a , a.first_anchor , a#NavContactPage").click(function(){
    var id = $(this).attr("data-sectionId");
    var link = "load/" + id + ".html";

    $("div#Content").load(link , function(){
        $("section#" + id).fadeIn(); 
        if(id === "Portfolio"){
            $('div.slide').cycle('fade');
        }
        if(id === "Home"){
            $("#jcycleslider").cycle({
                fx: mtransition,
                easing: easing,
                before: onBefore,
                after: onAfter,
                speed: mpace,
                timeout: mnext,
                sync: msync,
                randomizeEffects:0,
                pager:'#jslider_nav'
            })
            $("#jslider_nav a").text("");
        }    
    })      
    return false;
})

How can I solve this problem?

Upvotes: 10

Views: 14405

Answers (4)

Cutz Clutso
Cutz Clutso

Reputation: 51

came across this problem when I was using the .load() function to import html into my main page. I put this inside my ready function and it worked for me

$(document).on('click','#btninsertrequest',function(){
alert("yes");
});

Upvotes: 5

Durgesh
Durgesh

Reputation: 406

Are u binding ur events on jquery ready ?

Your event binding code should be inside and use on instead of click. I think that should solve ur problem.

$(function(){

  // Bind event here

});

Upvotes: 0

t.niese
t.niese

Reputation: 40842

$("selector").click(...) only registers the callbacks for the click event to the elements that where visible to jQuery at the time you did the query. So for newly added elements, that match this selector, the callback will not be applied.

You either need to registrate the callbacks to the newly added elements again or you need to use:

$(document).on('click',"nav a , a.first_anchor , a#NavContactPage", ... );

Instead of using document as root it is recommend to use e.g. the element where you are loading the content to as root e.g. $("div#Content").on( .... );

Upvotes: 13

A. Wolff
A. Wolff

Reputation: 74420

As i understand it, you should use delegation with .on():

$(document).on('click',"nav a , a.first_anchor , a#NavContactPage",function(){...}

Upvotes: 7

Related Questions