JQuery .on（）不是将点击事件绑定到动态创建的元素 [英] JQuery .on() isn't binding click events to dynamically created elements

问题描述

我有一个文本框，动态添加一个元素，当我按enter键，另一个删除元素，当我点击删除按钮。

下面是代码：

  $  - > 
＃AJAX添加一个新库存
 $（＃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 =itemdata-path ='+ response.path +'data-stock ='+ response.symbol + ''>'+ response.symbol +'< i class =icon remove>< / i>< / a>'
 $（'＃symbols'）。append（new_element）
 $（'＃add-symbol'）。val（''）
 else 
 #deal有错误
 
＃AJAX删除股票
 $ '.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 
＃处理错误
）
  

有什么想法吗？根据我已经阅读的内容，.on（）应该解决将一个click事件绑定到一个动态生成的元素的问题，但它似乎不工作。

解决方案

这是错误的： $（'。icon.remove'）。on（'click'...

这是对的： $（document）.on（'click'，'.icon.remove'，function） p>

您可以使用任何容器而不是文档（这是最高级的容器）。

希望有助于

I have a textbox that dynamically adds an element when I press enter, and another that deletes the element when I click the delete button. The delete method works for any existing elements, but doesn't work for any elements that were dynamically inserted.

Here's the code:

$ ->
    # 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
    )

Any ideas? From what I've read, .on() should fix the issue of binding a click event to a dynamically generated element, but it doesn't seem to be working.

解决方案

this is wrong: $('.icon.remove').on('click'...

this is right: $(document).on('click', '.icon.remove', function)

you can use any container instead of document (which is the most highlevel container).

hope that helps

这篇关于JQuery .on（）不是将点击事件绑定到动态创建的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！