1

record_rowすべてのdiv onclickに基づいて 1 つの操作を実行したい。私はこれを行ってい$('.record_row').live("click",function(){})ます。record_row div 内option_iconに、画像を入れた div を入れます。によって onclick の記録を防止しました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
});
4

2 に答える 2

0

最初のハンドラーについては、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...

});

あなたの2番目のハンドラーは単に

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

また、HTML マークアップから onclick イベント ハンドラを削除します。

于 2013-02-06T14:54:11.193 に答える
0

次のようにクリックイベントを処理してみます。

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

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

詳細については、こちらをご覧ください

于 2013-02-06T14:35:43.557 に答える