Question

我想在所有record_row div onclick的基础上执行一个操作。我是通过$('.record_row').live("click",function(){})这样做的。在record_row div里面，我把option_icon div放在其中我放了一张图片。我已通过onclick="event.cancelBubble = true;"阻止了记录点击。这是工作使用$('.option_icon').click(function(){})但不能使用$('.option_icon').live("click",function(){})函数。

有什么建议吗？提前谢谢。

Html： -

<div id="container">
    <ul>
        <li><div id="data_item_1" class="record_row">
                User record displayning here
                <div class="option_icon" onclick="event.cancelBubble = true;">
                    -----
                </div>  
            </div>  
        </li>   
        <li>
            <div id="data_item_2" class="record_row">
                 .........
                <div class="option_icon" onclick="event.cancelBubble = true;">
                    -----
                </div>  

            </div>  
        </li>
    </ul>
</div>

Jquery的： -

$('.record_row').live("click",function(){
    -----------
    -----------
    // working fine
});   

$('.option_icon').live("click",function(e){
       e.stopPropagation();
    -----------
    -----------
    // Not working
});

Answer 1

我会尝试像这样处理点击事件：

$(document).on('click', '.option_icon', function(ev){
    ev.stopPropagation();
    ev.cancelBubble = true;

    -----------
    -----------
    // Not working
});

您可以找到有关此here

的更多信息

Answer 2

对于第一个处理程序，使用jQuery事件对象的target属性检查事件的来源。由于它可能也来自div.option_icon的孩子，因此您可以使用closest方法确定它是否在<div>范围内。

$('#container').on('click', '.record_row', function (e) {

    // if event bubbled up from .option_icon, ignore
    if ( $(e.target).closest('.option_icon').length > 0 ) return;

    //your code here...

});

你的第二个处理程序只是

$('#container').on('click', '.option_icon', function () {
    //your code here...    
});

此外，从HTML标记中删除onclick事件处理程序

event.cancelBubble不能使用.live

2 个答案: