CODEWITHSUNDEEP
jquery
Venkat Papana
Venkat Papana

Reputation: 4927

How to attach event call back for dynamic html

Hi I have a jQuery onload function that attaches a function call on mouse over of some inline links based on its classname, also I wil load some html content dynamically using ajax, but the above function call attachment based on the classname is not working for the dynamic html, how to resolve this..

My code will look like the following (actually in my code i load images instead of simple links)


$(function(){   
    $(".highlight").mouseover(function(){
        $(this).css("background-color", "rgb(255,255,0)");
    });

    $(".highlight").mouseout(function(){
        $(this).css("background-color", "rgb(255,255,255)");
    });


});

$(function(){
        //ajax call
        // set the ajax return value inside dynamic div
    $(".dynamic").html(""+new Date()+"");
});

<body>
    <div>
        <a href="#" class="highlight">link1</a>
        <a href="#" class="highlight">link2</a>
        <a href="#" class="highlight">link3</a>
    </div>
    <div class="dynamic"></div>
</body<

Thanks venkat papana

Upvotes: 0

Views: 555

Answers (3)

Teneff
Teneff

Reputation: 32158

you need .live() method 

$('.dynamic a').live('mouseover', function(){
   $(this).css({border: '1px solid red'});
});

this will add mouseover on each <a> after you append it

Upvotes: 0

Ant
Ant

Reputation: 3887

You need to bind your events using http://api.jquery.com/live/ which works for any future elements as well as current ones.

Upvotes: 0

Dave G
Dave G

Reputation: 9767

The jQuery live() functionality may meet your needs.

http://api.jquery.com/live/

Upvotes: 2

Related Questions