2 события jQuery для одного действия, кажется, отменяют друг друга

Question

** Обновление: я вставил рабочий код, чтобы стереть неоднозначность того, что происходит.Я также пытался удалить protectDefault на обоих обработчиках, это не помогает *

У меня есть форма, где после нажатия кнопки должно произойти событие JS, и форма должна быть отправлена.

В соответствии с приведенным ниже кодом, я думал, что произойдет следующее: оповещение (кнопка), затем оповещение (форма) или наоборот. Мне плевать на последовательность.

Однако, если я ее запущу, появится предупреждение (кнопка), а предупреждения (форма) - нет.

ЕслиЯ закомментирую код кнопки, появится оповещение о форме.

Есть ли у меня какое-то фундаментальное недопонимание, как это должно работать?

jQuery(document).ready(function(){

  $("form.example").submit(function(event){
    event.preventDefault();
    alert("form submitted");
  });


  $("form.example button").click(function(event){
    event.preventDefault();
    alert("button clicked");
  });
)};


<form class="example" action="/v4test">
  <button type="submit">Meow!</button>  
</form>

Answer 1

После редактирования OP

Вам не нужно предотвращать дефолт по клику .... только отправка ... вот вам рабочий код:

Пример jsFiddle

1011 *
*

jQuery(document).ready(function(){
    $('form.example').submit(function(event){
        event.preventDefault();
        alert("form submitted");
        // stop submission so we don't leave this page
    });
    $('form.example button').click(function() {
        alert("button clicked");
    });
});​

---

старый ответ

Вы можете просто поместить ваши обработчики .click() и .submit() последовательно, и они не должны отменяться. У вас есть синтаксических ошибок в вашем псевдокоде .... может быть, это вызывает проблемы?

Другая потенциальная проблема заключается в том, что $("form button") нацелены на теги HTML <button>. Если вы используете <input type="button" />, вы должны использовать $("form:button") и учтите, что <input type="submit" /> - это , а не кнопка. В любом случае, я предполагаю, что вы на самом деле используете теги <button>.

Обычно return false используется внутри .submit(function() { ... });. Это останавливает отправку формы через HTML. s**[topPropagation][6]** очень отличается. Это связано с остановкой событий, «всплывающих» перед родителями элементов ....... Но я не понимаю, как это повлияет на ваше дело.

Если вы действительно отправляете HTML, сначала добавьте обработчик .click(), так как при правильной отправке HTML вы покинете страницу.

Если вы используете return false внутри .submit(), форма не будет отправлена ​​через HTML, и вам придется обрабатывать отправку с помощью jQuery / Javascript / AJAX.

В любом случае, здесь показана демонстрация событий .click() и .submit(), запускаемых последовательно ... код ниже:

Пример jsFiddle

$(function() {

    $('form button').click(function() {

        // Do click button stuff here.

    });

    $('form').submit(function(){

        // Do for submission stuff here
        // ...
        // stop submission so we don't leave this page
        // Leave this line out, if you do want to leave
        // the page and submit the form, but then the results of your
        // click event will probably be hard for the user to see.
        return false;

    });

});​

Выше приведено обоих обработчиков со следующим HTML:

<button type="submit">Submit</button>

---

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

$('form').submit(function() { /*submits form*/ }); 
$('form button').click(function() { /*does some action*/ });

Answer 2

Кажется, здесь есть некоторая путаница относительно распространения.Распространение событий (которое можно отключить с помощью stopPropagation ) означает, что события «всплывают» на родительские элементы;в этом случае событие click регистрируется в форме, поскольку оно является родительским для кнопки отправки.Но, конечно, обработчик отправки в форме не будет перехватывать событие click.

Что вас интересует, так это действие по умолчанию, которое в случае нажатия кнопки отправки заключается в отправке формы.Действие по умолчанию можно предотвратить, вызвав либо protectDefault , либо вернув false.Вы, вероятно, делаете последнее.

Обратите внимание, что в функциях Javascript, которые не заканчиваются явным return, они все же возвращают значение, которое является результатом последней команды в функции.Вы должны закончить свой обработчик кликов с return; или return true;. Я понятия не имею, откуда я это взял.Javascript-функции фактически возвращают неопределенное значение, когда нет явного оператора return.

Answer 3

Отправляет ли нажатие кнопки форму?Если это так:

// Disable the submit action
$("form").submit(function(){
    return false; 
});

$("form button").click(function(){
    // Do some action here

    $("form").unbind("submit").submit();

});

Если вы не отмените привязку к событию submit, когда нажмете кнопку, отправка ничего не сделает.

Answer 4

Если вы положили возвращаемое значение false на клик, это должно отменить поведение по умолчанию.Если вы хотите выполнить одно, то другое, вызовите $ ('form'). Submit () в функции click.например,

$('form').submit { //submits form}

$('form button').click {
// does some action
$('form').submit();
}