Use classes of dynamically loaded html with Jquery

Question

I have a dynamically loaded page with divs of class product. Jquery doesn't see this class with the code below. When I click on product divs it doesn't do anything. However clicl on nav-element works fine. Any way to make it work with it?

$(document).ready(function(){
$(".nav-element").click(function(){
    var id = $(this).attr('id');
    alert(id);
    $(".nav-element").css("background", "#fff");
    $("#"+id).css("background", "#A4CFBE");
    $(".content-white").load(id+".html");
    });
    $(".content-white").load("nav-element1.html");
$(".product").click(function(){
    alert("poop");
})
});

Satpal · Accepted Answer · 2014-02-01 15:08:54Z

4

a dynamically loaded page with divs of class product

You need to use Event Delegation. You have to use .on() using delegated-events approach.

i.e.

$(document).on('event','selector',callback_function)

Ideally you should replace document with closest static container. Here its ".content-white"

Example

$(".content-white").on('click', '.product', function () {
    alert("poop");
});

answered Feb 1, 2014 at 15:08

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Comments

adeneo · Accepted Answer · 2014-02-01 15:09:30Z

1

Try a delegated event handler

$(document).ready(function () {
    $(".nav-element").click(function () {
        var id = $(this).attr('id');
        alert(id);
        $(".nav-element").css("background", "#fff");
        $("#" + id).css("background", "#A4CFBE");
        $(".content-white").load(id + ".html");
    });
    $(".content-white").load("nav-element1.html");

    // event delegation to the closest static element
    $(".content-white").on('click', ".product", function () {
        alert("poop");
    });
});

answered Feb 1, 2014 at 15:09

adeneo

319k29 gold badges410 silver badges392 bronze badges

2 Comments

dat_dude Over a year ago

Accepted because adeneo answered first.

adeneo Over a year ago

@user1380398 - Actually, Satpal posted an answer first, but it was just a general "use delegation" answer, I posted the first answer with working code.

Collectives™ on Stack Overflow

Use classes of dynamically loaded html with Jquery

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related