CODEWITHSUNDEEP
jqueryhandlebars.js
Stefan Perju
Stefan Perju

Reputation: 298

Get each element with jQuery from handlebars template

I want to get each item from a template. The template looks like:

<div class="row flush" id="photos_list">
<script id="photo_list_template" type="text/x-handlebars-template">
                    {{#each this}}
                    <div class="3u photo">
                        <img src="{{url}}" alt="{{name}}"/>
                    </div>

                    {{/each}}
</script>
</div>

And now i want to take each img, and on hover to display the alt, and a black background, but i cannot seem to make it work, to take the element. I want something like:

$('div.row').find('img').hover(function(){
            //some code
         })

This is the generated html:

<div class="row flush" id="photos_list">

                    <div class="3u photo">
                        <img src="http://everythingawesomeever.files.wordpress.com/2013/07/awesome-meter.jpg" alt="Again, with the insanity.">
                    </div>


                    <div class="3u photo">
                        <img src="http://who-is-awesome.com/who-is-awesome.jpg" alt="Who's awesome?">
                    </div>


                    <div class="3u photo">
                        <img src="http://www.miataturbo.net/attachments/insert-bs-here-4/78009-my-little-random-picture-thread-*sfw-huffy-*-1682345-slide-slide-1-biz-stone-explains-how-he-turned-91-random-photos-into-movie-jpg?datelin" alt="After Mask">
                    </div>


                    <div class="3u photo">
                        <img src="http://www.miataturbo.net/attachments/insert-bs-here-4/76756-my-little-random-picture-thread-*sfw-huffy-*-11254201pkm5958-jpg?dateline=1368653578" alt="English Muffin">
                    </div>


                </div>

How can i do it?

Upvotes: 0

Views: 1522

Answers (2)

David MacCrimmon
David MacCrimmon

Reputation: 966

This should do the trick, as the img tag is not in the dom on time of binding the event you need to target the parent and select which element within it that the event has to apply to:

$('div.row').on("mouseenter", "img", function () {
    // some code
});
$('div.row').on("mouseleave", "img", function () {
    // some code
});

Upvotes: 3

reyaner
reyaner

Reputation: 2819

you should use this if the dom is beeing generated:

   $("div.row").on("mouseenter mouseleave", "img", function(e){
        if(e.type == "mouseenter"){
        ..
        }else{
        ...
         }
    });

Upvotes: 1

Related Questions