Событие щелчка jQuery не работает для класса p-тегов [duplicate]

0

Я генерирую вывод опций, выбранных из выпадающего списка. Я хочу разрешить пользователю "удалять" выборки с выхода.

Я не могу заставить мой код работать, вот код, который выводит результат:

 $('#dataCombo').change(function(){
 $('#dataOutput').html('');
 var values = $('#dataCombo').val();
 for(var i = 0; i < values.length; i += 1) {
 $('#dataOutput').append(values[i] + '<p class="removeable">X</p>'+'<br/>')
 }});

Таким образом, выбранный выпадающий элемент отображается на странице с "X" рядом с ним в тегах P с классом "съемный", сгенерированный. Я проверил это в chrome, и тэг p создан с правильным классом.

Я добавил этот код, чтобы удалить выбранный вариант, но он не работает:

$('.removeable').click(function(){
$('.removeable').remove();
console.log("I did this"); 
});

Элемент не удаляется, я не могу войти в консоль. Любая идея, почему это не сработает?

РЕДАКТИРОВАТЬ:

Я внесла поправки в свой код:

$('#dataOutput').append('<p class="removeable">' + values[i] + 'X</p>'+'<br/>')

И он действительно удаляет элемент, однако опция все же "выбрана" в раскрывающемся списке. Я пытался заставить его "отменить" это тоже. Я использую Bootstrap и выпадаю с "несколькими" активированными. Хотя этот параметр в настоящий момент удален из вывода, он не удаляется из поля выбора (что означает, что при нажатии на другой параметр он повторно отображает ранее удаленный элемент).

Я задал вопрос (надеюсь) более четко, по-другому, по дублированному вопросу: Отмените выбор опции с помощью jQuery на элементе выбора Bootstrap

  • 1
    Никто не объяснил, что когда браузер выполняет ваш $('.removeable').click(function(){}); line p элементы еще не существуют, поэтому обработчик щелчка не будет привязан. Вы должны сказать JQuery привязать обработчик щелчка на элементе предка (который существует на странице в то время) и получить событие щелчка делегировано вниз к вашему p .
  • 0
    Наконец, вы, вероятно, захотите удалить родительский элемент p (или дальше вверх по предку - в зависимости от вашей разметки), иначе все, что будет делать этот код, это удалить X
Показать ещё 2 комментария
Теги:

2 ответа

1
Лучший ответ

Используйте делегирование событий и, пожалуйста, используйте ссылку $(this) внутри этого обработчика кликов. Если вы этого не используете, то при нажатии на один элемент происходит удаление всех этих элементов с этим классом

$("#dataOutput").on('click','.removeable',function(){
 $(this).remove();
 console.log("I did this"); 
});

А также обратите внимание, что всегда предпочитайте ближайший статический родитель для делегирования событий

Поделиться
  • 0
    @ downvoter: Можете ли вы указать причину вашего понижения ..? Я что-то здесь упускаю ..?
  • 0
    Я не понизил вас, но все ответы были понижены (я видел, как Феликс перешел с 3 на -1, а теперь снова на 1 ...) Странно ...
Показать ещё 3 комментария
1

Поскольку ваши абзацы добавлены динамически в DOM, событие click не будет доступно для этого абзаца. В этом случае делегирование событий поможет вам присоединить это событие к этим динамически генерируемым абзацам:

Делегирование событий позволяет нам присоединить одного прослушивателя событий к родительскому элементу, который будет срабатывать для всех дочерних элементов, соответствующих селектору, независимо от того, существуют ли эти дети сейчас или добавлены в будущем.

$('#dataOutput').on('click', '.removeable', function() {
    $(this).remove();
    console.log("I did this"); 
});

Кроме того, вместо удаления всего .removeable при нажатии любого абзаца с классом removeable, вы можете настроить таргетинг только на щелчок, используя $(this) внутри вашего обработчика кликов.

Поделиться
  • 0
    Спасибо за ответ, однако кажется, что этот метод только удаляет <p class="removeable">X</p> а не элемент внутри. Любая идея, как я могу это исправить?
  • 0
    Какие элементы вы хотите удалить при нажатии на абзац? Можете быть более конкретными?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню