Jquery在Chrome中工作，但不在Firefox中工作

Question

I have the following jquery to stop any links from working. It works find in Chrome but fails in Firefox. I don't see any errors. Per some information I found online I change the import to this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>

Here is the Jquery:

<script>
    var j$ = jQuery.noConflict();
    j$(document).ready(function (){
           stopClick();
    });


    function stopClick(){
        j$( ".cxfeeditem" ).on( "click", "a", function() {
                event.preventDefault();
         });
    }

  </script>

Thanks for any help, I'm really stuck.

Answer 1

You need to pass the event object as the first argument of the click handler. Try this:

function stopClick(){
    j$( ".cxfeeditem" ).on( "click", "a", function(event) {
            event.preventDefault();
     });
}

Answer 2

Symlink's answer is good, but he doesn't provide an explanation for why it works. Here's what's going on:

In your original code, you had a button whose default action was presumably to submit the form. When you clicked the button, it went ahead and did that - ignoring the JavaScript that you'd written.

To make sure your JavaScript loads as expected, you must override the default action of the button. You do this by passing the event object into your function and invoking the preventDefault() method. This allows JavaScript can carry out the action you intended, rather than submitting the form as prescribed by the HTML.

Apparently FireFox is smart enough to know what you intended to do, but Chrome stubbornly maintained the HTML default.