Javascript срабатывает после 2 клика — почему?

Question

[Влад]

Ув. гуру!
Прошу помогите найти ошибку - в яваскрипте я плох Растерялся

Значит выводится вот такая форма:

<form action='/engine/ajax/my_votepost.php' method='POST' id='votepost' onsubmit='doVotePost(1,2,3); return false;'> ... </form>

Вот функция:

function doVotePost (who,kogo,newsid) {
  $('#votepost').submit(function(e){
    e.preventDefault();
    var m_method=$(this).attr('method');
    var m_action=$(this).attr('action');
    var m_data=$(this).serialize();
    $.ajax({
      type: m_method,
      url: m_action,
      data: m_data+"&who="+who+"&kogo="+kogo+"&newsid="+newsid,
      success: function(result){
          $('#votepost').html(result);
      }
    });
  });
};

В результате скрипт работает, возвращается нужный result, но это происходит только после 2-ого клика по кнопке SUBMIT. Почему?

Если в яваскрипте удалить вот эту строку (оставить то, что внутри, но удалить конкретно вот это), то скрипт срабатывает после первого же клика, НО вместо возвращения result перекидывает на /engine/ajax/my_votepost.php и выводит результат там.
$('#votepost').submit(function(e){ };

Что не так с $('#votepost').submit(function(e){ ?

Answer 1

[Евгений Петров]

Навертели вы что-то с квадратными колёсами...

HTML

<form action="/engine/ajax/my_votepost.php" method="POST" id="votepost">...</form>

JS

$(document).on('submit', '#votepost', function (e) {
	var form = $(this);

	e.preventDefault();
	$.ajax({
		type: this.method,
		url: this.action,
		data: form.serialize()
	}).done(function (result) {
		form.html(result);
	});
});

Comments

[Влад]

огромное спасибо! а в двух словах не скажете, что было неверно в моём коде? где я там "навертел"?

[Евгений Петров]

Влад: Во-первых, вы используете то, что не следует применять в общем случае — инлайн атрибуты событий. Есть моменты, когда они могут быть полезны, но это — не ваш случай, и эти ситации специфичны.

Во-вторых, при первом клике, как уже сказал Alex T., произойдёт отмена отправки формы и регистрация той функции, что написана внутри submit(), в качестве обработчика. То есть ничего внутри этой функции выполнено не будет — она лишь будет запущена при следующей отправке.

Ну и по мелочам — не нужно осуществлять траверс одного и того же элемента несколько раз. Не следует создавать паразитных переменных. Не нужно использовать deprecated свойства типа success вместо методов, рекомендованных с точки зрения подхода Promise.

Answer 2

[Никита Гущин]

Что не так с $('#votepost').submit(function(e){ ?

Верните false из функции и будет вам счастье

Comments

[Влад]

вы так имели ввиду? при такой записи меня тоже перекидывает на my_votepost.php, а мне это не надо:

function doVotePost (who,kogo,newsid) {
$('#votepost').submit(function(e){
e.preventDefault();
var m_method=$(this).attr('method');
var m_action=$(this).attr('action');
var m_data=$(this).serialize();
$.ajax({
type: m_method,
url: m_action,
data: m_data+"&who="+who+"&kogo="+kogo+"&newsid="+newsid,
success: function(result){
$('#votepost').html(result);
}
});
}, return false);
}

[Евгений Петров]

Да вы что:) Alex T. уже написал, почему при первой отправке ничего не произойдёт. Причём тут возврат false? Вы хоть понимаете, что в jQuery делает эта инструкция?

[Влад]

не понимаю ещё) смотрю в книгу и вижу фигу))
iNikNik предоставил готовый код)
спасибо за помощь!

Answer 3

[Alex]

Не так то, что submit(function....) это только подписка на сабмит. Т.е. в первый клик вы только подписываетесь, а во второй - подписка уже срабатывает

Comments

[Влад]

разве я не должен подписываться ещё на этом месте?
onsubmit='doVotePost(1,2,3); ???

подскажите, пожалуйста, как исправить?

[Alex]

Можно убрать function doVotePost (who,kogo,newsid) { и onsubmit='doVotePost(1,2,3); return false;'
или $('#votepost').submit(function(e){ + e.preventDefault();
Во втором случае надо явно возвращать false, чтобы форма не улетала по своему action

[Евгений Петров]

Alex T.: В обработчике достаточно вызвать метод preventDefault() для полученного события. Зачем вам нужен ещё и stopPropagation()?

[Влад]

спасибо!
тут iNikNik скинул рабочий код :)

[Alex]

Евгений Петров вы о чем? Если мы убираем анонимку, то у нас нет event?

[Евгений Петров]

Alex T.: Наверное, я запутался в нумеровании случаев в вашем ответе. Если вы про то, что в инлайн-обработчике нужно возвращать false, то значит я ошибся.