jquery - 重写 JQuery .click() 函数

Question

我在使用 jquery click 函数时遇到了一些问题，下面是我的代码布局的一部分:

<td id="01" class="day-main-diary">
    <div title="sdfsdf" class="diary-event ui-corner-all">
        <span id="delete"></span>
        <div class="diary-event-title ui-corner-all">
            sdfsdf
        </div>
        <div class="diary-event-body ui-corner-all">
            <p class="hyphenate">sdfsdf</p>
        </div>
    </div>
</td>

标题、diary-event-title中的文本和diary-event-body中的文本都是动态生成的，并且“day-main-diary”类绑定(bind)了一个点击函数(实际代码在js文件中)是:

$('.day-main-diary').click(function(){
   // Code is here
}

我正在寻找一种方法，可以在 ID 为“删除”的跨度上识别点击事件， 除其他外，我尝试过

$('.day-main-diary #delete').click(function(){

和

$('#delete').click(function(){

但是，每次它都会完全忽略此事件，并且始终调用当天的主日记点击事件。

有人能帮我吗？我将永远心怀感激 -马特

Answer 1

首先，请记住页面上只能有一个#delete ID。如果有多个，就会遇到问题，应该将其设为类.delete。

如果页面加载(动态)时不存在#delete元素，您可以使用.live()，它将负责处理事件无论您何时添加该元素。

$('#delete').live('click', function(){
           ...
 });

但请注意，这仍然也会触发 .day-main-diary 上的事件。

另一种选择是在 .day-main-diary 上调用 .delegate() (只要页面加载时它就在那里)。这与 .live() 类似，但更加本地化。

$('.day-main-diary').delegate('#delete', 'click', function() {
        ...
});

这也会触发 .day-main-diary 上的点击。不确定预期的行为是什么。

• http://api.jquery.com/live/
• http://api.jquery.com/delegate/

另一种选择是在 .day-main-diary 点击处理程序中测试点击的 e.target。如果是#delete，则做一件事，如果不是，则做另一件事。

$('.day-main-diary').click(function( e ) {
    if(e.target.id === 'delete') {
       // run code for the delete button
    } else {
       // do something else 
    }
});

否则，仍然假设#delete是动态的，您可以在创建它时绑定(bind).click()。

$('<span id="delete">delete</span>').click(function( e ) {
       // your code
       // uncomment the line below if you don't want the 
       //    click event to fire on .day-main-diary as well
       // e.stopPropagation()
})
.appendTo('day-main-diary');