0

答え：

/* I bound the events via the parent instead of binding it 
   on each span tag individually. this allowed me to manipulate
   the span tags uniquely. ( thank you Jason P ) */
$( '.selected-option-wrapper' ).on( 'click', 'span', function() { });

免責事項:

私は私の心を失っています。

詳細：

htmlユーザーがドロップダウンで選択したオプションをまとめてリストしようとしていますul/li。ユーザーが a をクリックしてli a、 a タグ内に html の一部を配置し、別のdiv.

例えば：

html

// html within the li tag that I want cloned over
<a id="met" class="item-1" href="#">
    <div class="left check-wrapper">
        <span class="gicon-ok"></span>
    </div>
    <div class="hide item-display"> // exact element to be moved over
        <span class="gicon-remove-sign left remove-option-item"></span>
    <div class="left">Metallic Thread</div>
</a>

JavaScript

$( '.options' ).find( 'a' ).on( 'click', function( e ) {

    ind_option_html = $( this ).find( '.item-display' ).clone();

    /* attach a click event to the span tag */
    ind_option_html.find( 'span' ).on( 'click', function() { 
        console.log( this );
    });

    /* this is in a $.each loop that appends each new ind_option_html */
    $( '.selected-option-wrapper' ).show().append( ind_option_html );

});

問題

1つだけクリックするとli a、関数が正常に起動thisし、spanタグがログアウトされます。しかし驚くべきことは、ユーザーが別li aのタグをクリックすると、clickイベントが最新のspanタグにのみ配置されることです。

最初のタグonclickでイベントはどこに行きますか?span

4

2 に答える 2

1

なぜ問題が発生しているのかはわかりませんが、おそらくイベント委任を使用して回避できます。毎回イベント ハンドラーをバインドする代わりに、DOM の準備ができたら次のようにします。

$('.selected-option-wrapper').on('click', 'span', function() { ... });

on()と、直接および委任されたイベントに関するセクションを参照してください。

于 2013-08-29T20:33:05.023 に答える
0

イニシャルはどこですかvar ind_option_html(または偶発的なグローバルですか)? クリック ハンドラーのすべてのインスタンスが同じ参照を使用しているように見えますが、これは常に最後に処理されるものです。

したがって、修正は次のようになります。

ind_option_html = $( this ).find( '.item-display' ).clone();

に：

var ind_option_html = $( this ).find( '.item-display' ).clone();
于 2013-08-29T18:40:40.187 に答える