jquery.on() 不起作用

Question

我有以下 HTML 结构，即 handlebars.js模板:

<div class="row" id="{{serviceId}}">
            <div class="favorites" isfavorite="{{isFavorite}}">
                <img src="{{favImg}}" style="width:25px;">
            </div>
            <!-- end .favorites -->
            <div class="service">
                <p class="title">{{serviceName}}</p>
            </div>
            <div class="small serviceStat">

            </div>
            <div class="small metric">

            </div>
            <div class="performance"></div>
            <div class="icon email">
                <img src="../images/email.png" style="width:27px">
            </div>
        </div>

当我尝试使用 .on() 方法将事件绑定(bind)到电子邮件类时，它不起作用:

$('.row').on('click','.email',function(){alert('clicked')});

 //or like this:
$('.email').on('click',function(){alert('clicked')});

但是如果我将它与 live 绑定(bind)它就可以了:

$('.email').live('click',function(){alert('clicked')});

知道是什么原因造成的吗？

Answer 1

问题是您需要将委托(delegate)处理程序绑定(bind)到 DOM 中的上方 [.row 元素将存在的位置]...

如果你有:

<div id="item-container">
    <!--divs with class row go in here -->
</div>

你需要这样做:

$('#item-container').on('click', '.email', function() {alert('clicked'); });

原因是您的模板实例在文档就绪时不存在于 DOM 中...因此您需要将事件绑定(bind)到一个存在的元素存在...又名，item-container