jQuery doesn't work on Firefox but works on Chrome

Question

I have this jQuery code:

function action(action){
    event.preventDefault();
    var products = $("#check-list input:checkbox:checked").map(function(){
      return $(this).val();
    }).get();
    var string = JSON.stringify(products);
    var table = $('#table').val();

    if(products.length != '0' || action === 'old-all'){
        $.ajax({
            type: 'post',
            url: 'app/toolbar.php',
            data: {action:action, table:table, ids:string},
            success:function(data){
                localStorage.setItem('notify', data);
                location.reload();
            },
        });
    } else{
        notify('You must choose an element first');
    }
}

I'm using jQuery 3.3.1 .

If i click a button without checking a checkbox i should get You must choose an element first but if i choose an element the toolbar.php should run and do the thing it has to be done(according to which button was pressed:

<button class="grey-btn" onClick="action('delete')">Delete</button>
<button class="grey-btn" onClick="action('update')">Update</button>

It works on Chrome perfectly but it doesn't work on Firefox . I was trying some answers that i found on some other similar 'works on chrome but not on firefox' questions but neither one of them worked :(

Answer 1

You do not define event so that is your problem. Get away from using inline event handlers and bind it with jQuery.

 $("[data-action]").on("click", function (event) { event.preventDefault(); var btn = $(this); var action = btn.data("action"); console.log(action); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="grey-btn" data-action='delete'>Delete</button> <button class="grey-btn" data-action='update'>Update</button> 

If you really want to use inline event handlers than do

 function action (event, method) { event.preventDefault(); console.log(method); } 

 <button class="grey-btn" onClick="action(event, 'delete')">Delete</button> <button class="grey-btn" onClick="action(event, 'update')">Update</button>