protectDefault не работает

0

Я пытаюсь отправить запрос ajax для выполнения задачи при нажатии ссылки. По какой-то причине e.preventDefault не работает, и я все равно получаю его на страницу. Есть что-то, чего я не хватает?

Он просто должен перейти на страницу, чтобы установить флажок, чтобы проверить (или снять флажок), а затем перенаправить. Но опять же он просто идет на страницу. Любая помощь будет замечательной!

здесь main.js

$(function() {

    $('.ajax-task-complete').on({
        click: function(e) {
            e.stopPropagation();
            e.preventDefault();

            var href = $(this).attr('href');

            $('<div></div>').load(href+' form', function() {

                // Set Form
                var form = $(this).children('form');

                // Set Checkbox
                var cb = form.find('input[type="checkbox"]');

                // Taggle Checkbox
                cb.prop('checked', !cb.prop('checked'));

                // Form Action URL
                var url = form.attr('action');

                // Set Data
                var data = form.serialize();

                $.ajax({
                    url: url,
                    data: data,
                    method: 'post',
                    dataType: 'json',
                    cache: false,
                    success: function(obj) {
                        var tic = $('#task-complete-' + obj.id + ' .ajax-task-complete');
                    },
                    complete: function() {
                        console.log('complete');
                    },
                    error: function(err) {
                        console.log(err);
                    }
                });
            });
        }
    });
});

здесь запрошенная кнопка

 <td id="task-complete-{{ entity.id }}">
 {% if entity.completed %}
     <a class="check ajax-task-complete" href="{{ path('task_edit_complete', { 'id': entity.id }) }}">&#10004;</a>
 {% else %}
     <a class="uncheck ajax-task-complete" href="{{ path('task_edit_complete', { 'id': entity.id }) }}">&#10004;</a>
 {% endif %}
 </td>
  • 0
    Почему бы вам просто не прикрепить событие click? Если у вас есть какие-то критерии, которые вы оцениваете и, следовательно, запускаете protectDefault, то, возможно, рассмотрите возможность возврата из функции на этом этапе?
  • 0
    Почему вы используете load, если вы уже использовали ajax в своей функции? Возможно, это происходит из-за нагрузки, что ваш e.preventDefault () не работает должным образом?
Показать ещё 4 комментария
Теги:

5 ответов

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

Это ваша проблема:

Uncaught ReferenceError: $ не определен?

Прочтите ЗДЕСЬ от SO, как вы правильно загружаете свой jQuery-плагин.

Поделиться
0

Попробуйте помещать событие preventDefault в конце функции, как показано ниже

$('.ajax-task-complete').on({
    click: function(e) {
  //
  //your code here then,

 e.preventDefault();
 e.stopPropragation();
});

Я не могу проверить, работает оно или нет, поскольку я нахожусь на мобильном телефоне.

Поделиться
0

вам может потребоваться прекратить пузыриться в зависимости от того, где происходит событие клика. Попробуйте добавить это и посмотреть, что произойдет.

e.stopPropagation();
Поделиться
  • 0
    к сожалению это все еще берет меня к странице.
  • 0
    Вы пробовали это с обоими e.preventDefault (); & e.stopPropagation ();
Показать ещё 5 комментариев
0 
**"$"**

отсутствует (function() {

Событие javascript pageload должно быть похоже на

$(function(){
//code here
});

или функция будет вызываться самим

 (function(){
        //code here
        )}();

или

(function($){
//code here
})(jQuery)

Вы можете проверить скрипку здесь

Поделиться
  • 0
    Я получаю Uncaught ReferenceError: $ is not defined
  • 0
    Пожалуйста, проверьте скрипку.
Показать ещё 1 комментарий
0

Ваша область действия неверна, вам не хватает () after (function)(). Функция никогда не вызывается:

(function() {

    $('.ajax-task-complete').on({
        click: function(e) {
            e.stopPropagation();
            e.preventDefault();

            var href = $(this).attr('href');

            $('<div></div>').load(href+' form', function() {

                // Set Form
                var form = $(this).children('form');

                // Set Checkbox
                var cb = form.find('input[type="checkbox"]');

                // Taggle Checkbox
                cb.prop('checked', !cb.prop('checked'));

                // Form Action URL
                var url = form.attr('action');

                // Set Data
                var data = form.serialize();

                $.ajax({
                    url: url,
                    data: data,
                    method: 'post',
                    dataType: 'json',
                    cache: false,
                    success: function(obj) {
                        var tic = $('#task-complete-' + obj.id + ' .ajax-task-complete');
                    },
                    complete: function() {
                        console.log('complete');
                    },
                    error: function(err) {
                        console.log(err);
                    }
                });
            });
        }
    });
})(); //Add () here

Но действительно ли нужна область?

Возможно, вы имели в виду готовый обработчик, тогда это должно быть так:

$(function); //Missing '$'
Поделиться
  • 0
    Ганьон, я попробовал то, что ты сказал. Он продолжает говорить мне Uncaught ReferenceError: $ is not defined
  • 0
    @zachstarnes Тогда у вас возникли проблемы при загрузке jquery. Возможно это не загружено или в конфликте. Try (function($){...})(jQuery) . Дайте ошибку, как jQuery не определен, это означает, что он не загружен.
Показать ещё 1 комментарий

Ещё вопросы

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