JQuery .on() 没有将点击事件绑定到动态创建的元素[重复]

Posted 2023-03-03

【中文标题】JQuery .on() 没有将点击事件绑定到动态创建的元素[重复]

【英文标题】：JQuery .on() isn't binding click events to dynamically created elements [duplicate]

【发布时间】：2013-10-22 15:53:47

【问题描述】：

我有一个文本框，当我按下回车键时动态添加一个元素，另一个在我单击删除按钮时删除元素。 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() 应该解决将点击事件绑定到动态生成的元素的问题，但它似乎不起作用。

【问题讨论】：

on 如果使用得当，应该可以解决问题，即使用事件委托语法。 $(container).on('çlick', '.icon.remove', function()... 其中 container 是容器选择器，它包含这些元素并且随时可用。

@PSL 也试过了，没有骰子

@PSL 没关系，我之前把我的容器搞砸了。这完美无缺。干杯！

告诉我你的语法看起来不像那样！

@phpglue 哎呀，我应该提到它是咖啡脚本

【参考方案1】：

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

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

您可以使用任何容器代替文档（这是***别的容器）。

希望对你有帮助

【讨论】：

正确回答。 :-)

这对我有用，谢谢。虽然我还没有弄清楚有什么区别。 The jQuery site 明确表示前者是绑定的正确用法..

感谢节省时间，我总是忘记如何正确快速地完成。

@army 无论文档如何，前一种语法都无法正常工作。这只是你必须知道的事情。 :)

仅供参考。 $('.icon.remove').on('click'... 适用于静态 html 元素 (api.jquery.com/on)