2

JQuery .live は廃止され、今後使用すべきではないと聞いています。以下のサンプル コードは、id が adddiv のボタンがある場所に記述したもので、id が seconddiv の div を ID が firstdiv の既存の div に追加します。

seconddiv 内に、delete の ID を持つ別のボタンがあり、クリックすると、seconddiv を削除します。コードはそのままで問題なく動作しますが、削除ボタンのクリック イベントをキャッチする JQuery を .on または .bind のいずれかを使用するように変更すると、動作しなくなります。

これを .on または .bind のいずれかを使用して動作させるように変更する方法を誰か教えてもらえますか?

HTML:

<div id="firstdiv">
Pre Existing Div
<input type="button" id="adddiv" value="Add Div" />
</div>

Javascript:

<script type="text/javascript">
    $().ready(function () {

        $('#adddiv').click(function () {
            $('#firstdiv').append('<div id="seconddiv"> Click here to delete the second div: <input type="button" id="delete" value="Delete Div"></div>')
        });

        $('#delete').live('click', function (e) { 
            $(this).parent('#seconddiv').remove();
        });   
    });
</script>
4

3 に答える 3

4

jQuery.on()は次のように設定されています
.on( events [, selector ] [, data ], handler(eventObject) )。

基本的に、既存のセレクターにバインドする必要があるため、この例では次のセレクターを使用できます。

  • $(document).on()
  • $('body').on()
  • $('#firstdiv').on()

次に、何を指定しますevent:

  • $(document).on('click')
  • $('body').on('click')
  • $('#firstdiv').on('click')

注:複数のイベントをバインドする場合は、イベント間にスペースを追加します。

$(document).on('click mouseover')

デモ: http://jsfiddle.net/dirtyd77/uBuH7/1/

次に、どの要素がイベントをトリガーするかを言います。

  • $(document).on('click', '#delete')
  • $('body').on('click', '#delete')
  • $('#firstdiv').on('click', '#delete')

注:複数の要素をバインドする場合は、コンマを使用します。

$(document).on('click', '#delete, #delete2')

デモ: http://jsfiddle.net/dirtyd77/uBuH7/2/

最後に、ハンドラーを追加します。

  • $(document).on('click', '#delete', function(){ })
  • $('body').on('click', '#delete', function(){ })
  • $('#firstdiv').on('click', '#delete', function(){ })

ジャバスクリプト:

 $().ready(function () {
    $('#adddiv').click(function () {
        $('#firstdiv').append('<div id="seconddiv"> Click here to delete the second div: <input type="button" id="delete" value="Delete Div"></div>')
    });

    $(document).on('click', '#delete', function(e) {
        $(this).parent('#seconddiv').remove();
    });   
});

デモ: http://jsfiddle.net/dirtyd77/uBuH7/

于 2013-02-28T19:07:13.013 に答える
0

私が変更したいかなりの数のこと：

<script type="text/javascript">

    // Event handler to delete a second div
    var onDelete = function (e) { 
        $(this).closest('#seconddiv').remove();
    };
    // Event handler to add a second div
    var onAdd = function () {
        // create div
        var div = $('<div/>', {
           id: 'seconDiv',
           text: 'Click here to delete the second div:'
        });
        // create button
        var button = $('<input/>', {
            id: 'delete',
            type: 'button',
            value: 'Delete Div'
        });
        // wrap them together and append
        div.append(button).appendTo('#firstDiv');
    };

    // Event binding .on(event, selector, handler)
    $(document).on('click', '#addiv', onAdd);
    $(document).on('click', '#delete', onDelete);
</script>
  1. を使用する場合、イベントがバインドされたときに最初のセレクターが DOM に存在する限り、.on()は必要ありません。$().ready()というわけで$(document)セレクター。コードを簡素化します。
  2. を使用する場合は、それを使い.on()続けるようにしてください。との両方.on('click'..)を使用すると、.click()面倒で混乱します。
  3. html と javascript を混在させるのは面倒なので、jQuery の方法で html 要素を構築してみませんか? 作成したばかりの要素の属性を把握しようとするときの水平スクロールからあなたを救います。さらに、DOM に要素を注入する前であっても、完全な jQuery サポートをすぐに利用できます。
  4. .closest()の代わりに使用すると.parent()、コードを壊さずに html のマイナーな変更が可能になります。
  5. もちろん.on()、非推奨の代わりに使用すること.live()は良い考えです。
  6. また、イベントのバインドと処理を分離するのも好きです。すべてのイベント バインダーを密接に積み重ねることで、ドキュメントに存在するイベントを簡単に把握できます。
于 2013-02-28T19:59:11.367 に答える
0 
 <script type="text/javascript">
    $().ready(function () {

        $('#adddiv').click(function () {
            $('#firstdiv').append('<div id="seconddiv"> Click here to delete the second div: <input type="button" id="delete" value="Delete Div"></div>')
        });

        $('body').on('click', '#delete', function (e) { 
            $(this).parent('#seconddiv').remove();
        });   
    });
</script>

onイベントハンドラーとして配置したイベントでは、bodyこれは、呼び出す要素の親である限り、任意の要素にすることができます#delete。イベント ハンドラーに使用する DOM ツリーの上位に行くほど、バブリング効果はさらに大きくなります。

ただし、イベント ハンドラーを選択する際に留意すべきことの 1 つは、それが DOM で使用可能であることを確認する必要があることです。その場合$(document)、イベント ハンドラーとして使用しても常に安全です。

jQueryのonドキュメントはこちら

于 2013-02-28T19:07:25.503 に答える