preventDefault不起作用

Question

I am trying to send an ajax request to complete a task when a link is clicked. For some reason the e.preventDefault is not working and I still get sent to the page. Is there something I am missing?

It is simply supposed to go to the page set the check-box to checked (or unchecked) then redirect. But again it just goes to the page. Any help would be great!

here is the 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);
                    }
                });
            });
        }
    });
});

here is the requested button

 <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

This is your problem:

Uncaught ReferenceError: $ is not defined?

Read HERE from SO how you load your jQuery-plugin the right way.

Answer 2

you might need to stop bubbling depending on where the click event is occurring. Try adding this and see what happens.

e.stopPropagation();

Answer 3

Your scope is wrong, you are missing the () after (function)() . The function is never called :

(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

But is the scope really needed here?

Maybe you meant a ready handler, then it should be like this :

$(function); //Missing '$'

Answer 4

**"$"**

is missing before (function() {

javascript pageload event should be like

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

or function will be called by themself

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

or

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

You can check the fiddle here

Answer 5

Try placing the preventDefault event at the end of the function as below

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

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

I can't test if it works or not, as I'm on mobile.