Question

我正在尝试发送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>

Answer 1

这是你的问题：

未捕获的ReferenceError：$未定义？

阅读HERE from SO如何以正确的方式加载jQuery-plugin。

Answer 2

您可能需要停止冒泡，具体取决于点击事件发生的位置。尝试添加此内容，看看会发生什么。

e.stopPropagation();

Answer 3

您的范围错误，()之后您遗漏了(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 '$'

Answer 4

**"$"**

在(function() {

之前缺少

javascript pageload事件应该像

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

或功能将由他们自己调用

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

或

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

您可以查看小提琴here

Answer 5

尝试将preventDefault事件放在函数末尾，如下所示

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

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

我无法测试它是否有效，因为我正在移动。

preventDefault不起作用

5 个答案: