javascript - 无法在刚刚插入的 HTML 中按类 jQuery 找到元素

Question

render:function () {
    var self = this;
    $.ajax({url:'/db/list.json', dataType:'JSON'}).done(function (json) {
        var html = tmpl['video-list']({videos:json});
        self.$el.html(html);
    });

    console.log($('.video-thumb-box'));

    $.each($('.video-thumb-box'), function(){
        console.log(this);
        $(this).bind('mouseenter', function(){
            console.log($('.video-thumb-info', this));
        });
    });
}

tmpl['video-list']({videos:json}) 是下划线模板，包含 DIV 中的项目列表，这里是返回示例

<div class="span3">
    <a href="#/video/123">
        <div class="video-thumb-box">
            <img class="video-thumb-img" src="test" alt="Video tumbnail">
            <div class="video-thumb-info hide">
                <img class="pull-right" width="16" height="16" src="/img/icons/namba.png">
                something
            </div>
        </div>
    </a>
</div>
<div class="span3">
    <a href="#/video/123">
        <div class="video-thumb-box">
            <img class="video-thumb-img" src="test" alt="Video tumbnail">
            <div class="video-thumb-info hide">
                <img class="pull-right" width="16" height="16" src="/img/icons/namba.png">
                something
            </div>
        </div>
    </a>
</div>

为什么我在 $('.video-thumb-box') 中找不到任何内容？

Answer 1

你的每个循环都是倒退的。

$('.video-thumb-box').each(function() {
    console.log(this);
    $(this).bind('mouseenter', function(){
        console.log($('.video-thumb-info', this));
    });
});

这是 jQuery .each() API页