Блог

Главная - Вопросы по программированию - Проблема с методом .on()

Проблема с методом .on()

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь создать MVC для учебных целей, и я следую руководству по тому, что довольно старое. Реализация в руководстве была выполнена с использованием live(), но я решил использовать jQuery 2.1.1 и должен реализовать метод on() . Я привел небольшой пример использования для пояснения.

  1. Я могу вставлять новые элементы на страницу при добавлении их в БД
  2. Я могу удалить предварительно загруженные элементы, которые существовали в БД при загрузке страницы как из БД, так и из DOM
  3. Я не могу удалить элементы, которые добавляются в реальном времени ни из db, ни из DOM.

это весь мой код, касающийся этого.

 $(function(){

$.get('dashboard/xhrGetListings', function(o){

    for (var i = 0; i < o.length; i   )
    {
        $('#listInserts').append('<div>'   o[i].text   '<a class="del" rel="'   o[i].id   '" href="#">x</a></div>');
    }

    $('.del').on("click", function() {
        delItem = $(this);
        var id = $(this).attr('rel');

        $.post('dashboard/xhrDeleteListing', {'id': id}, function(o) {
            delItem.parent().remove(); // THIS IS NOT EXECUTED AT ALL
        }, 'json');

        return false;
    });
}, 'json');

// Не обязательно актуально, это просто помогает для ясности кода

 $('#randomInsert').on("submit", function() {
    var url = $(this).attr('action');
    var data = $(this).serialize();
    console.log(data);

    $.post(url, data, function(o) {
        $('#listInserts').append('<div>'   o.text   ' <a class="del" rel="'   o.id   '" href="#">X</a></div>');
    }, 'json');

    return false;
});

});

Еще одна проблема, на которой я не фокусируюсь на данный момент, заключается в том, что если я удаляю родительский элемент внутри метода $.post (как показано в приведенном выше коде), он не удаляется, только если я перемещаю эту строку за пределы метода post. Любые разъяснения по этому поводу также были бы очень признательны.

Комментарии:

1. $.post('dashboard/xhrDeleteListing'...) успешно ли выполняется этот запрос? выдает ли консоль какие-либо ошибки? проверьте инструменты отладки js

2. да, это выполнено успешно … это означает, что связанный код выполняется, но все, что находится внутри скобок, не выполняется. (ошибок на консоли нет)

3. возможно, код, который он вызывает, был запущен, но если он не возвращает код состояния HTTP 200 OK, функция не будет вызвана. ваши браузеры регистрируют все вызовы ajax, дважды проверьте статус возврата соответствующего вызова.

4. он возвращает код 200 для предварительно загруженных элементов (которые также удаляются), для вновь вставленных через $(‘#randomInsert’) он ничего не делает при нажатии на ссылку удаления.

Ответ №1:

Используйте event delegation , и event.preventDefault() это останавливает действие по умолчанию

 $('#listInserts').on("click", '.del' , function(event) {

        event.preventDefault();

        // your code come here
});
Метки: