Почему Mozilla ругается на event JQuery?

Question

[Евгений]

Почему в Mozille ругается на EVENT, что "ReferenceError: event is not defined" и код не работает. Когда к примеру в CHROME все работает и предупреждений никаких нет?

function confirmSubmit(id, table, do) {
	event.preventDefault();
swal({
  title: 'Вы действительно хотите?',
  text: table+' под ID-'+id,
  type: 'warning',
  showCancelButton: true,
  confirmButtonClass: 'btn-danger',
  confirmButtonText: 'Да, хочу!',
  closeOnConfirm: false,
  cancelButtonText: 'Нет, не хочу!'
}

Comments

[Kudis]

А откуда event появится в области видимости confirmSubmit?
chrome многое прощает

[DanKud]

Так вы event то передавайте в функцию:

function confirmSubmit(event, id, table, do) {
    .....

[Евгений]

DanKud, Спасибо, я только учусь и не знал...
Теперь выдает ошибку TypeError: event.preventDefault is not a function
пробовал и просто e передавать

[DanKud]

Евгений, так не достаточно просто написать event в атрибуты функции, нужно же передавать в нее это событие. Покажите как вы используете функцию confirmSubmit() в дальнейшем коде.

[DanKud]

В целом в общем у вас должно быть как-то так:

$('селектор_кнопки').on('click', (event) => {
    .....
    confirmSubmit(event, id, table, od);
    .....
});

[Евгений]

DanKud, отправка ajax

<a onclick="return confirmSubmit(25, 'текст', delete)" href="#">ссылка</a>

function confirmSubmit(id, table, do){
	event.preventDefault();
swal({
  title: 'Вы действительно хотите?',
  text: table+' под ID-'+id,
  type: 'warning',
  showCancelButton: true,
  confirmButtonClass: 'btn-danger',
  confirmButtonText: 'Да, хочу!',
  closeOnConfirm: false,
  cancelButtonText: 'Нет, не хочу!'
},
function(){
		
	    $.ajax({
             url: 'ajax.php',
             type: 'POST',
             data: 'id='+id+'&do='+do,
             async: true,
             dataType: 'json',
			 success: function(data) {
			 	if(data.response == 'success') {
                	swal("Готово!", data.success, 'success');  			
			},
             cache: false,
             processData: false
         });
});
};

[Евгений]

Дело в том, что у меня 3 кнопки, у каждой кнопки динамический id, при нажатии на кнопку, передается id и действие. Так скрипт понимает, что делать и с чем делать. А функция одна на все эти кнопки, сервер возвращает что делал, а функция if ом отслеживается и выводится нужные мне действия после выполнения скрипта. При нажатии выскакивает alert.... и вот скролл страницы перемещается в начало из за того, что по сути нажимаем на ссылку. Вот и пытаюсь отключить это действие

[DanKud]

Евгений, вам нужно вешать события на ссылки непосредственно через JQuery:

function confirmSubmit(event, id, table, doo) {
    event.preventDefault();
    .....
}

$('a[href="#"]').each((index, element) => {
    $(element).on('click', (event) => {
        confirmSubmit(event, id, table, doo);
    });
});

P.S. Да и кстати do нельзя использовать в имени переменной, это зарезервированное ключевое слово для цикла.

[Евгений]

DanKud, Да что такое, не получается, вообще не работает, посмотрите правильно сделал? Уже правда код доработал, он рабочий, только проблема в event.preventDefault();

<td id="129"><a onclick="confirmSubmit(129,'Удалить', 'delete')" href="#"><i class="fa fa-remove" style="color: #dc2a0b!important;" title="Удалить"></i></a><a id="off129" onclick="confirmSubmit(129,'Отключить', 'power_off')" href="#"><i class="fa fa-power-off" style="margin-left: 15px; color: #dc2a0b!important;" title="Отключить"></i></a><a id="graduates129" onclick="confirmSubmit(129,'Переместить', 'graduates')" href="#"><i class="fa fa-money" style="margin-left: 5px; color: #3c763d!important;" title="Переместить"></i></a></td>

$('a[href="#"]').each((index, element) => {
    $(element).on('click', (event) => {
    	
function confirmSubmit(event, id, table_name, todo) {
			event.preventDefault();
			console.log(event);
swal({
  title: 'Вы действительно хотите?',
  text: table_name+' под ID-'+id,
  type: 'warning',
  showCancelButton: true,
  confirmButtonClass: 'btn-danger',
  confirmButtonText: 'Да, хочу!',
  closeOnConfirm: false,
  cancelButtonText: 'Нет, не хочу!'
},

function(){

	    $.ajax({
             url: 'ajaxpomet',
             type: 'POST',
             data: 'id='+id+'&todo='+todo,
             async: true,
             dataType: 'json',
			 success: function(data) {
			 	if(data.response == 'success') {
                	swal("Готово!", data.success, 'success');
        			
        			if(data.todo == 'delete')
        			{
				// Плавное удаление записи
	                    $('#' + id).hide('slow', function() {
	                        $(this).remove();
	                    });
					}
					else if(data.todo == 'power_off')
					{
						$('#off'+id).replaceWith('<a id=on'+id+' onclick=\"return confirmSubmit('+id+',\'Включить\', \'power_on\')\" href=#><i class=\"fa fa-power-off\" style=\"margin-left: 15px; color: #3c763d;\" title=Включить></i></a>');
					}
					else if(data.todo == 'power_on')
					{
						$('#on'+id).replaceWith('<a id=off'+id+' onclick=\"return confirmSubmit('+id+',\'Отключить\', \'power_off\')\" href=#><i class=\"fa fa-power-off\" style=\"margin-left: 15px; color: #dc2a0b!important\" title=Отключить></i></a>');
					}
					else if(data.todo == 'graduates')
					{
						$('#graduates'+id).replaceWith('<i class=\"fa fa-check\" style=\"margin-left: 15px; color: #3c763d!important;\" title=Перемещен></i>');
						$('#off'+id).remove();
					}
                }else{
                    swal("Ошибка!", data.error, 'error');
                }
			},
             cache: false,
             processData: false
         });
});
};
    });
});

[DanKud]

Евгений, для начала уберите onclick= из HTML-кода, а потом попробуйте так:

function confirmSubmit(id, table_name, todo) {
    console.log(event);
    swal({
            title: 'Вы действительно хотите?',
            text: table_name+' под ID-'+id,
            type: 'warning',
            showCancelButton: true,
            confirmButtonClass: 'btn-danger',
            confirmButtonText: 'Да, хочу!',
            closeOnConfirm: false,
            cancelButtonText: 'Нет, не хочу!'
        },

        function(){
            $.ajax({
                url: 'ajaxpomet',
                type: 'POST',
                data: 'id='+id+'&todo='+todo,
                async: true,
                dataType: 'json',
                success: function(data) {
                    if(data.response == 'success') {
                        swal("Готово!", data.success, 'success');

                        if(data.todo == 'delete')
                        {
                            // Плавное удаление записи
                            $('#' + id).hide('slow', function() {
                                $(this).remove();
                            });
                        }
                        else if(data.todo == 'power_off')
                        {
                            $('#off'+id).replaceWith('<a id=on'+id+' onclick=\"return confirmSubmit('+id+',\'Включить\', \'power_on\')\" href=#><i class=\"fa fa-power-off\" style=\"margin-left: 15px; color: #3c763d;\" title=Включить></i></a>');
                        }
                        else if(data.todo == 'power_on')
                        {
                            $('#on'+id).replaceWith('<a id=off'+id+' onclick=\"return confirmSubmit('+id+',\'Отключить\', \'power_off\')\" href=#><i class=\"fa fa-power-off\" style=\"margin-left: 15px; color: #dc2a0b!important\" title=Отключить></i></a>');
                        }
                        else if(data.todo == 'graduates')
                        {
                            $('#graduates'+id).replaceWith('<i class=\"fa fa-check\" style=\"margin-left: 15px; color: #3c763d!important;\" title=Перемещен></i>');
                            $('#off'+id).remove();
                        }
                    }else{
                        swal("Ошибка!", data.error, 'error');
                    }
                },
                cache: false,
                processData: false
            });
        }
    );
};

var table_nameArr = ['Удалить', 'Отключить', 'Переместить'];
var todoArr = ['delete', 'power_off', 'graduates'];

$('a[href="#"]').each((index, element) => {
    var id = var id = $(element).parent().attr('id'); /* так получить id из td можно, но это не совсем правильно, хоть и будет работать */
    $(element).on('click', (event) => {
        event.preventDefault();
        confirmSubmit(id, table_nameArr[index], todoArr[index]);
    });
});

[Евгений]

DanKud, Что то я запутался, в том виде который вы дали код, скопировал. вставил не работает. Алерт открывается, но post запрос уходит без переменных. И не понял, зачем объявлять переменную id в явном виде, ведь он всегда меняется и должен передаваться в функцию. Вообщем засада, видимо придется закрыть глаза на прыгающий скролл страницы

ps

[DanKud]

Евгений, я поправил код на счет динамического получения id от родительского td. Проверьте через console.log() что вам в итоге приходит в функцию при клике:

function confirmSubmit(event, id, table_name, todo) {
    var str = id + ' - ' + table_name + ' - ' + todo;
    console.log(str);
    swal({
    .....

[DanKud]

Евгений, да и еще один момент, пересмотрите мой предыдущий код заново. Я вынес event.preventDefault(); из функции, иначе он некорректно работал. В новом виде должно работать.

[Евгений]

ответ console.log(str);

DanKud,

Onclick удалил стало так, результат выше... алерт появляется, пост отправляется...

<td id=129"><a "confirmSubmit(129,'Удалить', 'delete')" href="#"><i class="fa fa-remove" style="color: #dc2a0b!important;" title="Удалить"></i></a>

здесь один var удалил, ошибка была, браузер ругался
var id = var id = $(element).parent().attr('id');

И все таки нужен вот здесь event, а то вы разные присылаете то есть то нет?

function confirmSubmit(event, id, table_name, todo)...

[DanKud]

Евгений, извиняюсь, что запутал. event нужно убрать из атрибутов функции:
function confirmSubmit(id, table_name, todo)...

В общем, чтобы было понятно о чем идет речь, вот рабочий код, без основной части вашей функции: https://codepen.io/anon/pen/BbPLer?editors=1010#0

[Евгений]

DanKud, Спасибо теперь все работает, поясните пожалуйста, если захочу добавить еще одно действие, к примеру "Включить" , куда прописывать? Пробовал в массив добавлять

var table_nameArr = ['Удалить', 'Отключить', 'Включить', 'Переместить'];
var todoArr = ['delete', 'power_off', 'power_on', 'graduates'];

все работает но event.preventDefault();отказывается)))
Если вы обратили, в скрипте когда приходит ответ к примеру от действия "Отключить", вместо этой ссылки вставляется ссылка с действием "Включить" и наоборот. Как бы кнопка on/off ))) Спасибо, что заморочились с моей проблемой)))

[DanKud]

Евгений, у меня event.preventDefault(); в этом коде работает без проблем. По ссылке не переходит. Не знаю в чем у вас проблема. Чтобы добавить новые элементы в массив вы делаете все верно, но нужно добавить и еще одну ссылку соответственно в HTML, чтобы их было 4 шт внутри <td> - https://codepen.io/anon/pen/BbPLer?editors=1010#0

[Евгений]

DanKud, Ссылок всегда 3, просто одна ссылка вкл/откл меняется в зависимости от состояния. Меняет ее вот этот код

else if(data.todo == 'power_off')// Если отключили, меняем ссылку на включение
                        {
                            $('#off'+id).replaceWith('<a id=on'+id+' onclick=\"return confirmSubmit('+id+',\'Включить\', \'power_on\')\" href=#><i class=\"fa fa-power-off\" style=\"margin-left: 15px; color: #3c763d;\" title=Включить></i></a>');
                        }
                        else if(data.todo == 'power_on')// Если включили, меняем ссылку на отключение
                        {
                            $('#on'+id).replaceWith('<a id=off'+id+' onclick=\"return confirmSubmit('+id+',\'Отключить\', \'power_off\')\" href=#><i class=\"fa fa-power-off\" style=\"margin-left: 15px; color: #dc2a0b!important\" title=Отключить></i></a>');
                        }

event.preventDefault(); Я имел ввиду не работает, когда добавляю 4 ссылку в массив, а так все прекрасно

[Евгений]

DanKud, Привет! Как всегда все на поверхности, нашел еще одно решение отключения перехода ссылки по умолчанию(Алерт не скролит страницу в начало). Я добавил в свой старый код команду в конец функции return false; и return к ссылкам... и проблема ушла)))

function confirmSubmit(id, table_name, todo) {
    // мой код с ajax
    return false;
}

<td id="123"><a onClick="return confirmSubmit(123, 'Удалить', 'delete')" href="#"><i class="fa fa-remove" style="color: #dc2a0b!important;" title="Удалить"></i></a>"</td>

Answer 1

[Александр]

Теперь выдает ошибку TypeError: event.preventDefault is not a function
пробовал и просто e передавать

А вы когда вызываете функцию передаете event?
Должно выглядить так:

<button onclick="confirmSubmit(event, id, table, do)" >Нажми</button>

Comments

[Евгений]

Нет... у меня ссылка вот такого вида

<a onclick="return confirmSubmit(25, 'текст', delete)" href="#">ссылка</a>

Мне нужно чтобы не срабатывал переход по ссылке. Просто в примерах нигде не видел, что его нужно передавать... И что передавать в переменной event ?

[Александр]

Евгений,

<a onclick="confirmSubmit(event, 25, 'текст', delete)"  href="#">ссылка</a>

function confirmSubmit(event, id, table, do) {
  event.preventDefault();
  ...

[Евгений]

Александр, Я же писал выше, что так не канает)))
ошибка: TypeError: event.preventDefault is not a function

[Александр]

Евгений, Во-первых, почему вы передаете do, это зарезервированное слово, предназначение для цикла. Во-вторых, delete нужно передавать в ковычках. В-третьих у меня все работает

<a onclick="confirmSubmit(event, 25, 'текст', 'delete')"  href="/asdasd/asdasd">ссылка</a>

<script>
    function confirmSubmit(event, id, table, doIt) {
        event.preventDefault();
        console.log(event);
    }
</script>

[Евгений]

Александр, У меня не хочет

<a onclick="confirmSubmit('event', 126,'Удалить', 'delete')" href="#"><i class="fa fa-remove" style="color: #dc2a0b!important;" title="Удалить"></i></a>

function confirmSubmit(event, id, table_name, todo) {
			event.preventDefault();
			console.log(event);
swal({
  title: 'Вы действительно хотите?',
  text: table_name+' под ID-'+id,
  type: 'warning',
  showCancelButton: true,
  confirmButtonClass: 'btn-danger',
  confirmButtonText: 'Да, хочу!',
  closeOnConfirm: false,
  cancelButtonText: 'Нет, не хочу!'
},

function(){

	    $.ajax({
             url: 'ajax.php',
             type: 'POST',
             data: 'id='+id+'&todo='+todo,
             async: true,
             dataType: 'json',
	     success: function(data) {
		if(data.response == 'success') {
                	swal("Готово!", data.success, 'success');
        			
        			if(data.todo == 'delete')
        			{
				// Плавное удаление записи
	                        $('#' + id).hide('slow', function() {
	                        $(this).remove();
	                    });
				}
                }else{
                    //alert('Ошибка:' + data.error);
                    swal("Ошибка!", data.error, 'error');
                }
			},
             cache: false,
             processData: false
         });
});
};

[Andrey]

Евгений, вы в функцию передаёте строку. Откуда у строки может быть такой метод? Попробуйте подумать что у вас должно туда передаваться. И почему у человека выше работает, а у вас нет

[Евгений]

Андрей Леонтьев, Если бы додумался сам, сюда бы не написал(((

[Александр]

Евгений, Вы снова передаете неправильно!

<a onclick="confirmSubmit(event, 126,'Удалить', 'delete')" href="#"><i class="fa fa-remove" style="color: #dc2a0b!important;" title="Удалить"></i></a>

event не нужно брать в кавычки!

[Евгений]

Александр, уже нашел решение без event, в комментариях вопроса