1

我有以下 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()当我尝试使用它不起作用的方法将事件绑定到电子邮件类时：

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

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

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

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

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

4

2 回答 2

2

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

如果你有：

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

你需要这样做：

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

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

于 2012-09-18T21:30:18.097 回答
1

这段代码

$('.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在较新的版本之一中添加。

于 2012-09-18T21:26:01.360 回答