jquery.on() 不起作用

Question

我有以下HTML结构，这是一个车把.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() 方法将事件绑定到电子邮件类时，它不起作用：

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

但是如果我将其与 live 绑定，它可以工作：

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

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

Answer 1

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

如果您有：

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

您需要这样做：

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

这样做的原因是您的模板实例在文档准备就绪时在 DOM 中不存在......所以你需要将事件绑定到一个确实存在的元素......又名item-container

Answer 2

此代码

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

需要在此范围内：

$(document).ready(function(){
   /* Code goes here */
});

我猜不是。（这是为了确保事件在 DOM 准备就绪后绑定）。

要么，要么你使用的是旧版本的jQuery。 .on是在较新版本之一中添加的。