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{
        ...
         }
    });

从handlebars模板获取每个元素jQuery

2 个答案: