gpt4 book ai didi

javascript - JQuery .on() 未将点击事件绑定(bind)到动态创建的元素

转载 作者:行者123 更新时间:2023-12-03 21:52:41 24 4
gpt4 key购买 nike

我有一个文本框,当我按 Enter 时动态添加一个元素,另一个文本框在我单击删除按钮时删除该元素。删除方法适用于任何现有元素,但不适用于任何动态插入的元素。

代码如下:

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

最佳答案

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

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

您可以使用任何容器来代替文档(这是最高级的容器)。

关于javascript - JQuery .on() 未将点击事件绑定(bind)到动态创建的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19371141/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com