JQuery .on() 不会将单击事件绑定到动态创建的元素
JQuery .on() isn't binding click events to dynamically created elements
我有一个文本框,当我按回车键时动态添加一个元素,另一个文本框在我单击删除按钮时删除该元素。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() 应该解决将点击事件绑定到动态生成的元素的问题,但它似乎不起作用。
这是
错误的:$('.icon.remove').on('click'...
这是正确的:$(document).on('click', '.icon.remove', function)
您可以使用任何容器而不是文档(这是最高级的容器)。
相关文章:
- 如何在动态创建的节点上绑定函数
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 将值动态绑定到jquery中的切换按钮
- Angularjs在js中绑定动态表单构建
- 取消绑定动态创建的元素的单击事件
- 如何绑定动态表单
- 使用Angular数据绑定动态舍入总和
- 如何使用ng模型绑定动态复选框值
- 绑定动态元素的简单方法,无需调用函数jquery
- famo.Us /js:绑定动态数据,点击事件发送数据
- 如何在高图工具提示中绑定动态数据
- 从API绑定动态数据到FlipView控件
- 绑定/动态加载事件的动态HTML不工作
- Angular的$compile / $controller没有绑定动态HTML的作用域
- 解除绑定动态绑定的XBL的动态方式
- 与asp.net MVC绑定动态选择列表
- 在jquery中使用on绑定动态生成元素的多个事件处理程序对
- 选择不使用angular 2绑定动态更新的选项
- 在angular中调用$compile绑定动态HTML后的ng-repeat问题
- 使用 vue.js 绑定动态表单值