Почему JS скрипт срабатывает только со 2го — 3го раза?

Question

[Nik Faraday]

Вот у меня есть такой вот скрипт

<script>
$("#submitBtn").click(() => {
    let data = {
        email: $("#email").val(),
        login: $("#login").val(),
        password: $("#password").val()
    };

    let jsonData = JSON.stringify(data);

    $.ajax({
		method: 'post',
		url: '@Url.Action("SignUp", "User")',
		data: jsonData,
		dataType: 'json',
		contentType: 'application/json',
		success: function() {
			alert("Success");
		},
        error: function() {
            alert("Error");
        }
    });
});
</script>

Данный скрипт срабатывает только после 2‑го или 3‑го раза нажатия на кнопку. Почему так и как это можно исправить?

Comments

[Сергей Соколов]

что в консоль вываливается? Сообщения об ошибках, вот это вот всё..
И что значит «не срабатывает»? – не отправляется запрос по нажатию на кнопку, бэк присылает ошибку?

[Nik Faraday]

Сергей Соколов, дебагал часть скрипта, он просто пропускается. Брейкпоинт стоял на первой строке ($("#submitBtn").click(() => {) и он вообще не срабатывает первые несколько раз, но, где-то с раза 3го - 4го срабатывает

[キム ファイブプラス]

Он прямо в таком виде на странице?

[Nik Faraday]

キム ファイブプラス, да, изменял только некоторые детали, в частности, success и error

[キム ファイブプラス]

??

$(() => {
	("use strict");

$("#submitBtn").click(() => {
  alert();
    let data = {
        email: $("#email").val(),
        login: $("#login").val(),
        password: $("#password").val()
    };

    let jsonData = JSON.stringify(data);

    $.ajax({
    method: 'post',
    url: '@Url.Action("SignUp", "User")',
    data: jsonData,
    dataType: 'json',
    contentType: 'application/json',
    success: function() {
      alert("Success");
    },
        error: function() {
            alert("Error");
        }
    });
});
});

[Nik Faraday]

キム ファイブプラス, Что это такое:

$(() => {
  ("use strict");

UPD: не помогло

[キム ファイブプラス]

Nik Faraday,

$(function({})); = $(document).ready(function() {});

ждет onload jquery
https://developer.mozilla.org/ru/docs/Web/JavaScri...

UPD: не помогло

Значит дело где то в другом месте. Смотри сеть и консоль.

[Nik Faraday]

キム ファイブプラス,

$(function({})); = $(document).ready(function() {});

не помогло
А консолька как раз таки ругается на этот кусок кода, что там где-то лишняя скобка, хотя, вроде бы нет там ошибок.

В том коде, что я кидал, консоль не выдаёт синтаксических ошибок да и ошибок интерпретации вообще

[Nik Faraday]

キム ファイブプラス, может ли это быть связанно с тем, что у меня ещё на прямую на страницу кидается скрипт с подключением JQuery? Я просто думал, что это не имеет значения, но решил переспросить. Данный фрагмент кода выглядит вот так:

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
$("#submitBtn").click(() => {
   ...
   ...
   ...
});
</script>

По факту, у меня (Так как я работаю на asp.net mvc) ещё на _Layout.cshtml подключается этот же JQuery тем же скриптом, но проблема в том, что, если я заберу подключение данного скрипта из данной страницы отправки данных на сервер, тогда у меня выкинет ошибку в консоль, что не может определить символ $

UPD: Если убрать подключение скрипта из _Layout.cshtml , тогда скрипт будет срабатывать иногда со второго раза, но, в основном с первого! Хоть это и не является решением проблемы, но это реально может помочь.

Answer 1

[Nik Faraday]

Разобрался сам, вот решение:

Проблема заключалась в том, что я пишу бэк-часть на asp.net. На разметке видно, что у меня кнопка для отправки данных на сервер имеет тип submit. Данный тип кнопки составит вам проблему, если вы захотите реализовать передачу данных через ajax в асинхронном режиме.

Далее объясню решение в том аспекте, как её понимаю я.
Кнопка типа submit сама по себе пытается отправить форму на сервер параллельно запуская ajax скрипт, а так же перегружается страницу. При перегрузке страницы, почему-то полностью пропадает блок success (Есть несколько причин на это), но блок error почему-то остаётся и потом ловит ответ от сервера (Если такой есть). Если же ответ от сервера будет, допустим, статус-код 200, то блока success нет и, логично, нечему просто перехватывать соответствующий ответ.

Решение проблемы заключается в том, что бы просто поменять тип кнопки с submit на button и повешать на кнопку событие ajax.