У меня есть текстовое поле, которое динамически добавляет элемент, когда я нажимаю клавишу ввода, а другой, который удаляет элемент, когда я нажимаю кнопку удаления. Метод удаления работает для любых существующих элементов, но не работает для любых элементов, которые были динамически вставлены.
Здесь код:
$ ->
# 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() должен исправить проблему привязки события click к динамически сгенерированному элементу, но он, похоже, не работает.
это неверно: $('.icon.remove').on('click'...
это правильно: $(document).on('click', '.icon.remove', function)
вы можете использовать любой контейнер вместо документа (который является контейнером самого высокого уровня).
надеюсь, что поможет