Run javascript function for dynamically inserted HTML

Question

I have a piece of code that on hover of another element insert's this code below.

<div class="star" id="1">
<div class="star" id="2">
<div class="star" id="3">
<div class="star" id="4">
<div class="star" id="5">
</div>
</div>
</div>
</div>
</div>

All I want to do is retrieve the ID of each DIV through javascript:

$(document).ready(function() {

$('.star').on(function(e){

    e.stopPropagation();
    var rating = $(this).attr('id');

    alert(rating);
});

});

I've tried many ways of achieving this, this is the latest I've tried but I'm still having no luck! I'll be grateful of any help

Freaking easier to just do it next to where the DIVs are inserted. Any reasons why not to do it? Probably I misunderstood you question though — Alexander
– Alexander, Commented Dec 22, 2012 at 19:51
Agreed, you need to either alter that code, or if that's not possible, then attach another event handler to the hover event of it, and then run the $('.star')... code (perhaps after a slight delay to ensure your code runs after the insert of the divs). — MadSkunk
– MadSkunk, Commented Dec 22, 2012 at 19:57

user400654 · Accepted Answer · 2012-12-22 19:57:56Z

1

Trigger an event when said divs are added.

var counter = 0;
$(someelement).on("mouseenter",function(){
    counter++;
    $('<div class="star" id="' + counter + '" />').appendTo(".star:last").trigger("staradded");
})

$(document).on("staradded",".star",function(e) {
    alert(this.id);
});

Or better yet, skip the event.

var counter = 0;
$(someelement).on("mouseenter",function(){
    counter++;
    $('<div class="star" id="' + counter + '" />').appendTo(".star:last");
    alert(counter);
})

answered Dec 22, 2012 at 19:57

user400654

95.1k16 gold badges168 silver badges188 bronze badges

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

1 Comment

Alexander Over a year ago

This answer should be appropriate if just OP clarifies how it is adding those elements

Igor · Accepted Answer · 2012-12-22 20:12:20Z

0

I would use "livequery" plugin - https://github.com/brandonaaron/livequery

If I understood correctly, you need something like old function "live", since you would like to watch all new ".star" elements.

In this case you will just use following code:

 $('.star').livequery('click',function(e){});

Simple example you can find there - http://jsfiddle.net/WEr5J/11/

answered Dec 22, 2012 at 20:12

Igor

1,48610 silver badges6 bronze badges

Comments

Adil · Accepted Answer · 2012-12-23 01:29:48Z

0

You have wrong syntax of on as you are not telling what event you want to bind. After binding your required event e.g. click you can use map function to get all the comma separated ids of elements having class star.

Live Demo

$(document).on('click', '.star', function(e) {
    e.stopPropagation();
    ids = $('.star').map(function() {
        return this.id;
    }).get().join();
    alert(ids);
});

You need to use each to iterate through all elements.

$('.star').each(function(){           
    var rating = $(this).attr('id');    
    alert(rating);
});

edited Dec 23, 2012 at 1:29

answered Dec 22, 2012 at 19:53

Adil

148k25 gold badges217 silver badges207 bronze badges

1 Comment

MadSkunk Over a year ago

But if this code is called before the elements exist (i.e. before the initial 'hover' event that inserts them), this will never get run...

Collectives™ on Stack Overflow

Run javascript function for dynamically inserted HTML

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related