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')});

しかし、ライブでバインドすると機能します。

$('.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最近のバージョンの1つで追加されました。

于 2012-09-18T21:26:01.360 に答える