使用jQuery从工具栏模板获取每个元素

Question

我想从模板中得到每个项目。模板看起来如下：

<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>

现在我想把每个img，并在悬停显示的alt，和一个黑色的背景，但我似乎无法使它工作，采取的元素。我想要这样的东西：

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

这是生成的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>

我该怎么做呢？

Answer 1

这应该可以做到这一点，因为img标记在绑定事件时不在dom中，您需要锁定父元素并选择事件必须应用到其中的元素：

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

Answer 2

如果dom正在生成，则应使用此方法：

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