jQuery - Call function in function with dynamic content (.load())

Question

I have a site in which content is dynamic loaded via jQuery .load(). Sadly, I can't catch an event from the dynamic loaded content even though using .on().

This is my function in which I can't trigger the $("#control_right").on('click')-function after loading changeContent(2):

function changeContent(step){
$('#content').toggle(100);
setTimeout(function() {
      $('#content').load("template/step_" + step + ".html");
}, 180);
$('#content').delay(300).toggle(200).queue(function(){

    if(step === 1){ // IF STEP 1. CHOOSE MALE OR FEMALE
        console.log("step1");
        $("#choice_man").on('click', function(){
            changeContent(2);
        });

        $("#choice_woman").on('click', function(){
            changeContent(2);
        });
    }

    if(step === 2){ // IF STEP 2. Do something else
        $("#control_right").on('click', function() {
            console.log("CLICK");
        });
    }
});
}

I hope my problem is understandable.

Justinas · Accepted Answer · 2014-04-09 11:01:55Z

2

Try changing selector to one from DOM elements:

$(document).on('click', '#control_right', function(){...})

Bdw, why are you using .delay(300).toggle(200)?

.load('url.html #loadContentFrom', function(){/* Callback function */})

answered Apr 9, 2014 at 11:01

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bipen · Accepted Answer · 2014-04-09 11:03:00Z

1

like many other answer in stackoverflow (please search before posting your question), you have to use on delegated event and not just on().

 $('#content').on('click', "#choice_man",function(){
       ...

delegating it to your closest static parent present in the document at the time of insertion is preferred rather than document itself performancewise

answered Apr 9, 2014 at 11:03

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Collectives™ on Stack Overflow

jQuery - Call function in function with dynamic content (.load())

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related