jQuery的.on()方法无法将点击事件绑定到动态创建的元素上。

Question

我有一个文本框，在按下回车键时会动态地添加一个元素，还有一个在我点击删除按钮时删除该元素的功能。但是删除方法适用于所有已存在的元素，却无法作用于动态插入的元素。

这是代码：

$ ->
    # 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()应该可以解决将点击事件绑定到动态生成元素的问题，但似乎并没有起作用。

- chintanparikh

---

如果正确使用事件代理语法，on可以解决问题。例如：$(container).on('click', '.icon.remove', function(){... 这里的 container是包含这些元素的容器选择器，并且随时可用。请注意，翻译尽可能保持原意和简洁，不提供额外的信息或解释。 - PSL

@PSL 我也尝试过了，没有结果。 - chintanparikh

@PSL 没关系，我之前搞砸了我的容器。现在完美运行了。干杯！ - chintanparikh

告诉我你的语法真的不是那样的！ - StackSlave

@PHPglue 哎呀，我应该提一下这是 Coffeescript。 - chintanparikh

Answer 1

这是错误的：$('.icon.remove').on('click'...

这是正确的：$(document).on('click', '.icon.remove', function)

你可以使用任何容器代替document（它是最高级别的容器）。

- geevee

---

回答正确。 :-) - Kalpesh Panchal

这对我有用，谢谢。虽然我还没有弄清楚区别在哪里。jQuery网站明确表示前者是绑定的正确用法。 - army

谢谢，你是个时间的救星。我总是忘记如何正确而简洁地完成它。 - Qin Wang

@army 无论文档如何，前一种语法都不起作用。这只是你必须知道的事情。 :) - Velocibadgery

FYI。$('.icon.remove').on('click'... 适用于静态 HTML 元素（http://api.jquery.com/on/）。 - Chinh Phan