Question

我对jquery点击功能有一点问题，下面是我的代码布局的一部分：

<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>

标题，日记 - 事件 - 标题中的文本和日记 - 事件 - 正文中的文本都是动态生成的，并且“day-main-diary”类具有绑定到它的单击函数（js文件中的实际代码）是：

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

我正在寻找一种方法，可以在ID为'delete'的范围内识别点击事件，我尝试过的其他事情

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

和

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

但是，每次它完全忽略此事件并始终调用day-main日记点击事件。

谁能帮助我吗？我将永远伟大 -Matt

Answer 1

首先，请记住页面上只能有一个#delete ID。如果不止一个，那么您将遇到问题，并且应该将其设为.delete类。

如果页面加载（动态）时#delete元素不存在，您可以使用.live()，无论您何时添加元素，都会为您处理事件。

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

但请注意，仍会在.day-main-diary上触发事件。

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

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

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

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

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

否则，仍假设#delete是动态的，您可以在创建时绑定.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');

重写JQuery .click（）函数

1 个答案: