JQuery .on() isn#39;t binding click events to dynamically created elements(JQuery .on() 没有将点击事件绑定到动态创建的元素)
问题描述
我有一个文本框,当我按下回车键时动态添加一个元素,另一个在我单击删除按钮时删除元素.delete 方法适用于任何现有元素,但不适用于任何动态插入的元素.
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.
代码如下:
$ ->
# 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() 应该解决将点击事件绑定到动态生成的元素的问题,但它似乎不起作用.
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.
推荐答案
这是错误的:$('.icon.remove').on('click'...
这是对的:$(document).on('click', '.icon.remove', function)
您可以使用任何容器代替文档(这是最高级别的容器).
you can use any container instead of document (which is the most highlevel container).
希望对你有帮助
这篇关于JQuery .on() 没有将点击事件绑定到动态创建的元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:JQuery .on() 没有将点击事件绑定到动态创建的元素
基础教程推荐
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 在for循环中使用setTimeout 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 动态更新多个选择框 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01