Как зарегистрировать событие клика для загруженного контента ajax

0

Вот html у меня есть

<input type="text" name="post[price]" id="productUpdate" class="test" disabled />
<div class="abs-locator" id="eventDrive"></div>

Вот мой css

.abs-locator{
  width: 17.8%;
  position: absolute;
  margin-top: -29px;
  margin-left: 150px;
  height: 27px;
}

Мне нужно выполнить событие щелчка при нажатии скрытого поля ввода

Вот мой js

$('#eventDrive').on('click', function() {
    alert('test');
});

Но здесь ничего не происходит. Почему это происходит и как его разрешать

  • 0
    «Мне нужно выполнить событие щелчка, когда скрытое поле ввода нажато», не понимаю, извините. Как вы можете нажать на что-то невидимое?
  • 0
    Вот почему я создал div с абсолютным позиционированием на входе
Показать ещё 3 комментария
Теги:

3 ответа

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

Вам нужно использовать что-то вроде:

$(document).on('click', '#eventDrive', function() {
    alert('test');
});
Поделиться
  • 0
    Downvote, потому что это не будет работать при отключенном вводе. Пожалуйста, проверь это.
  • 0
    Является ли #eventDrive «отключенным вводом» в контексте OP?
Показать ещё 1 комментарий
2

Чтобы иметь событие click на загруженном Ajax содержимом, вам необходимо зарегистрировать событие в контейнере. Я бы сделал что-то вроде этого:

$(document).on('click', '#eventDrive', function() {
    alert('test');
});

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

Поделиться
  • 0
    На самом деле не понимаю отрицательное голосование, что с этим не так?
  • 1
    то же самое здесь, не понимаю
0

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

Я могу предложить небольшое решение для этого. Это не лучшая практика, но решит вашу проблему:

HTML:

<div style="display:inline-block; position:relative;">
    <input id="productUpdate" name="post[price]" type="text" disabled />
    <div class="inputOverflow" style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>

JQuery:

$(".inputOverflow").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});​
Поделиться

Ещё вопросы

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