web-dev-qa-db-ja.com

jQuery .on（）は動的に作成された要素にクリックイベントをバインドしていません

Enterキーを押すと動的に要素を追加するテキストボックスと、削除ボタンをクリックすると要素を削除するテキストボックスがあります。 deleteメソッドは既存の要素に対しては機能しますが、動的に挿入された要素に対しては機能しません。

これがコードです：

$ ->
    # AJAX to add a new stock
    $("#add-symbol").keypress (e) ->
        if e.which == 13
            url = $(this).data('url')
            name = $(this).val()
            $.ajax
                url: url
                type: "POST"
                data: {
                    user_id: $('#info').data('user-id'),
                    name: name
                }
                success: (response) ->
                    if response.status == 200
                        new_element = '<a class="item" data-path="' + response.path + '" data-stock="' + response.symbol + '">'+ response.symbol + '<i class="icon remove"></i></a>'
                        $('#symbols').append(new_element)
                        $('#add-symbol').val('')
                    else
                     #deal with errors

    # AJAX to delete stocks
    $('.icon.remove').on('click', (e) ->
        console.log('click click')
        $parent = $($(this).parent().get(0))
        stock = $parent.data('stock')
        user_id = $("#info").data('user-id')
        url = $parent.data('path')

        $.ajax
            url: url
            type: "DELETE"
            data: {
                user_id: user_id,
                name: stock
            }
            success: (response) ->
                if response.status == 200
                    $parent.remove()
                else
                    # deal with errors
    )

何か案は？私が読んだことから、.on（）は動的に生成された要素にクリックイベントをバインドする問題を修正するはずですが、機能していないようです。

javascriptjqueryruby-on-railscoffeescript
17
chintanparikh

これは間違っています：$('.icon.remove').on('click'...

これは正しいです：$(document).on('click', '.icon.remove', function)

ドキュメントの代わりにcontainerを使用できます（これは最上位のコンテナです）。

それが役に立てば幸い

59
geevee