Запрет отправки формы с помощью jQuery не работает

Question

Запрет отправки формы с помощью jQuery не работает

-1

Это моя простая форма:

<form accept-charset="utf-8" class="form-vertical" id="template" autocomplete="off" name="template" method="POST" action="http://test.dev/templates">
    ...various inputs and HTML here...
    <input class="btn btn-primary" type="submit" value="Update">
</form>

Это мой JS, который не препятствует отправке формы:

<script type="text/javascript">
    (function ($) {
        'use strict';

        $("form#template").on('submit.template', function (e) {
            e.preventDefault();
            console.debug(e.relatedTarget);
            return false;
        });
    }(jQuery));
</script>

Из прошлого опыта это должно помешать отправке формы при нажатии кнопки " Update. Почувствуй, что я пропускаю что-то больно очевидное. Что здесь может быть?

jQuery 2.1.1

eComEvo 21 фев. 2015, в 19:08

Источник

0

Как вы отлаживаете это? Обработчик отправки запущен? Может быть, вам нужно просто использовать обработчик документов в качестве оболочки, например: jQuery(function($){...}); К вашему сведению, ваше заявление на return здесь бесполезно
A. Wolff 21 фев. 2015, в 17:37
0

Скорее всего, этот скрипт не выполняется. Причины разные, но поскольку это встроенный скрипт, он может конфликтовать с заголовком Content-Security-Policy . Это должно быть показано в консоли браузера.
arkascha 21 фев. 2015, в 17:37
0

@ j08691 В конце блока кода после выполнения нескольких проверок я планировал использовать JS для отправки формы. Пространство имен позволяет мне отключить проверку отправки во второй раз, чтобы предотвратить зацикливание: $("form#template").off('submit.template').submit();
eComEvo 21 фев. 2015, в 17:42
0

@arkascha Нет уведомлений Content-Security-Policy .
eComEvo 21 фев. 2015, в 17:44
0

Вы убедитесь , что оно выполняется?
arkascha 21 фев. 2015, в 17:44
0

@arkascha Учитывая то, что оно никогда не отображается как событие сгенерированное в Chrome, похоже, оно не выполняется. Не знаю почему, хотя.
eComEvo 21 фев. 2015, в 17:47
0

Любые ошибки консоли? Вы пытались сделать это в блоке doc ready, чтобы убедиться, что содержимое dom загружено до того, как событие будет связано?
Ezra Morse 21 фев. 2015, в 17:47
0

@eComEvo Вы должны связать событие после добавления элемента в DOM, а не до. Поэтому установите привязку к событию, как только элемент будет доступен в DOM, используя, например, обработчик готовых документов
A. Wolff 21 фев. 2015, в 17:48
0

@EzraMorse (function ($) {...}(jQuery)); является эквивалентом этого. Кроме того, JS загружает в конце всех других элементов на странице.
eComEvo 21 фев. 2015, в 17:48
0

Я хотел убедиться, что привязка выполнена, поэтому скрипт. Не тот обработчик, который вы определяете внутри скрипта.
arkascha 21 фев. 2015, в 17:49
0

@eComEvo НЕТ, это не эквивалентно обработчику готовых документов
A. Wolff 21 фев. 2015, в 17:49
0

@ A.Wolff Они на самом деле эквивалентны: stackoverflow.com/questions/3528509/…
eComEvo 21 фев. 2015, в 17:50
0

@eComEvo Прочтите вашу ссылку еще раз и сравните ее с вашим кодом, это совершенно другое значение, $(handler) ! =, чем функция, вызываемая самостоятельно (передает ее или нет jQuery)
A. Wolff 21 фев. 2015, в 17:51
0

Ваш пример работает здесь jsfiddle.net/j08691/8k9y1kLs .
j08691 21 фев. 2015, в 17:51
0

работает нормально. см. jsfiddle.net/99Ldz45L
Pushker Yadav 21 фев. 2015, в 17:51
0

Ну, просто бросьте его в блок .ready и посмотрите, что произойдет. Это займет у вас 15 секунд.
Ezra Morse 21 фев. 2015, в 17:52
0

@EzraMorse сделал это в блоке .ready и работает так же.
eComEvo 21 фев. 2015, в 17:52
1

@eComEvo ТАК ФОРМА динамически добавляется в DOM? Почему бы вам не опубликовать соответствующую ссылку или онлайн-образец, где ваша проблема может быть проверена ???
A. Wolff 21 фев. 2015, в 17:54
0

@ A.Wolff Скрипка, опубликованная j08691, совпадает с той, с которой я работаю. Возможно, какая-то библиотека, которую я включил где-то в общий сайт, испортила код, потому что раньше это всегда работало без проблем. И нет, форма не добавляется динамически. Это статическая Лезвие созданная форма. К сожалению, не могу опубликовать весь источник здесь.
eComEvo 21 фев. 2015, в 18:00
0

@eComEvo Не могли бы вы попробовать: jQuery(document).on('submit.template', 'form#template', function(e){...}); ? Как примечание, идентификаторы должны быть уникальными в контексте документа, просто говоря это в случае ...
A. Wolff 21 фев. 2015, в 18:03
0

Очень сложно выяснить проблему без исходного кода, поскольку предоставленный код не имеет проблем. Если бы я был вами, я бы привязал события щелчка (или даже скрыл () их запуск) к кнопке отправки, чтобы проверить, связаны ли события. Тем не менее, я больше не использую формы и не отправляю события, так что я обычно полностью сосредоточен на элементах GUI.
Ezra Morse 21 фев. 2015, в 18:06
0

@ A.Wolff Хорошая идея, но, к сожалению, это не помогло. :( Только что попробовал этот кусочек кода прямо перед .on() чтобы увидеть, есть ли форма даже в DOM console.log('len: '+$('form#template').length); и это на самом деле недоступно. Оказывается, это потому, что id отсутствует. Я вижу это, когда view page source , НО я не вижу атрибута id в форме, когда я inspect element . проблема.
eComEvo 21 фев. 2015, в 18:13
0

@eComEvo Так что шаблонизатор удаляет ID, довольно странно, действительно ... :( Вы все равно можете связать событие, не указывая ID, это будет работать
A. Wolff 21 фев. 2015, в 18:17
0

@ A.Wolff Это очень странно и не то, что я мог бы воспроизвести с помощью jsFiddle, иначе я бы опубликовал это. Например, я добавил следующее сразу после закрывающего </form> и получил пустой результат: <script type="text/javascript">console.debug(document.getElementsByName('template'));</script> Как будто форма недоступна для JS, несмотря на то, что она четко видна на экране. Я в недоумении.
eComEvo 21 фев. 2015, в 18:28
0

Удаляет ли он также атрибуты класса и данных? Вы можете связать, используя их в качестве альтернативы (или вообще ничего, если это единственная форма на странице)
Ezra Morse 21 фев. 2015, в 18:28
0

@EzraMorse Механизм шаблонов фактически ничего не удаляет. Это происходит исключительно в Chrome. Тег класса остается, но теги данных также удаляются.
eComEvo 21 фев. 2015, в 18:31
0

ФОРМА обернута внутри КАДРА? Я добавил laravel и blade - теги , даже я не уверен , что это соответствующие них. «Эксперт» по этому шаблону может тогда взглянуть на него
A. Wolff 21 фев. 2015, в 18:34
0

@ A.Wolff Да, форма в фрейме. Я просматриваю содержимое iframe, когда смотрю на это, и JS загружается внутри iframe для этого. Тот же домен.
eComEvo 21 фев. 2015, в 18:38
0

Поэтому, чтобы получить к нему доступ, попробуйте: $(window).on('load', function(){console.log($('iframe").contents().find("form.form-vertical").length);});
A. Wolff 21 фев. 2015, в 18:40
0

@ A.Wolff Самс результат. Не отображается как существующее. Я также попытался получить конкретный, так как он загружается jQuery colorbox и сделал: console.log('len: ' + $('iframe.cboxIframe').contents().find("form.form-vertical").length); Нет, кости, хотя.
eComEvo 21 фев. 2015, в 18:43
0

Вы должны попытаться получить к нему доступ после загрузки IFRAME, а не до этого. Если все еще не работает, я не в себе :(
A. Wolff 21 фев. 2015, в 18:45
0

@ A.Wolff На самом деле, я только что попробовал $('iframe.cboxIframe').contents().find("form.form-vertical").length из консоли Chrome dev, и он показывает, что он существует. Если я делаю тот же код из блока кода JS внизу страницы, он показывает, что его не существует, что не имеет смысла, поскольку iframe загружается при выполнении вызова .ready() (и это в этом).
eComEvo 21 фев. 2015, в 18:45
0

@ A.Wolff В любом случае, спасибо вам и остальным за помощь в достижении этой точки. Это очень странная ошибка, с которой мне придется постоянно биться. Кстати, спасибо за указание на расхождение в моем понимании с тем, что было опубликовано в: stackoverflow.com/questions/3528509/…
eComEvo 21 фев. 2015, в 18:53

Показать ещё 31 комментарий

Теги:

javascript

jquery

laravel

blade

1 ответ

Ещё вопросы

Как вы отлаживаете это? Обработчик отправки запущен? Может быть, вам нужно просто использовать обработчик документов в качестве оболочки, например: jQuery(function($){...}); К вашему сведению, ваше заявление на return здесь бесполезно
Скорее всего, этот скрипт не выполняется. Причины разные, но поскольку это встроенный скрипт, он может конфликтовать с заголовком Content-Security-Policy . Это должно быть показано в консоли браузера.
@ j08691 В конце блока кода после выполнения нескольких проверок я планировал использовать JS для отправки формы. Пространство имен позволяет мне отключить проверку отправки во второй раз, чтобы предотвратить зацикливание: $("form#template").off('submit.template').submit();
@arkascha Нет уведомлений Content-Security-Policy .
Вы убедитесь , что оно выполняется?
@arkascha Учитывая то, что оно никогда не отображается как событие сгенерированное в Chrome, похоже, оно не выполняется. Не знаю почему, хотя.
Любые ошибки консоли? Вы пытались сделать это в блоке doc ready, чтобы убедиться, что содержимое dom загружено до того, как событие будет связано?
@eComEvo Вы должны связать событие после добавления элемента в DOM, а не до. Поэтому установите привязку к событию, как только элемент будет доступен в DOM, используя, например, обработчик готовых документов
@EzraMorse (function ($) {...}(jQuery)); является эквивалентом этого. Кроме того, JS загружает в конце всех других элементов на странице.
Я хотел убедиться, что привязка выполнена, поэтому скрипт. Не тот обработчик, который вы определяете внутри скрипта.
@eComEvo НЕТ, это не эквивалентно обработчику готовых документов
@ A.Wolff Они на самом деле эквивалентны: stackoverflow.com/questions/3528509/…
@eComEvo Прочтите вашу ссылку еще раз и сравните ее с вашим кодом, это совершенно другое значение, $(handler) ! =, чем функция, вызываемая самостоятельно (передает ее или нет jQuery)
Ваш пример работает здесь jsfiddle.net/j08691/8k9y1kLs .
работает нормально. см. jsfiddle.net/99Ldz45L
Ну, просто бросьте его в блок .ready и посмотрите, что произойдет. Это займет у вас 15 секунд.
@EzraMorse сделал это в блоке .ready и работает так же.
@eComEvo ТАК ФОРМА динамически добавляется в DOM? Почему бы вам не опубликовать соответствующую ссылку или онлайн-образец, где ваша проблема может быть проверена ???
@ A.Wolff Скрипка, опубликованная j08691, совпадает с той, с которой я работаю. Возможно, какая-то библиотека, которую я включил где-то в общий сайт, испортила код, потому что раньше это всегда работало без проблем. И нет, форма не добавляется динамически. Это статическая Лезвие созданная форма. К сожалению, не могу опубликовать весь источник здесь.
@eComEvo Не могли бы вы попробовать: jQuery(document).on('submit.template', 'form#template', function(e){...}); ? Как примечание, идентификаторы должны быть уникальными в контексте документа, просто говоря это в случае ...
Очень сложно выяснить проблему без исходного кода, поскольку предоставленный код не имеет проблем. Если бы я был вами, я бы привязал события щелчка (или даже скрыл () их запуск) к кнопке отправки, чтобы проверить, связаны ли события. Тем не менее, я больше не использую формы и не отправляю события, так что я обычно полностью сосредоточен на элементах GUI.
@ A.Wolff Хорошая идея, но, к сожалению, это не помогло. :( Только что попробовал этот кусочек кода прямо перед .on() чтобы увидеть, есть ли форма даже в DOM console.log('len: '+$('form#template').length); и это на самом деле недоступно. Оказывается, это потому, что id отсутствует. Я вижу это, когда view page source , НО я не вижу атрибута id в форме, когда я inspect element . проблема.
@eComEvo Так что шаблонизатор удаляет ID, довольно странно, действительно ... :( Вы все равно можете связать событие, не указывая ID, это будет работать
@ A.Wolff Это очень странно и не то, что я мог бы воспроизвести с помощью jsFiddle, иначе я бы опубликовал это. Например, я добавил следующее сразу после закрывающего </form> и получил пустой результат: <script type="text/javascript">console.debug(document.getElementsByName('template'));</script> Как будто форма недоступна для JS, несмотря на то, что она четко видна на экране. Я в недоумении.
Удаляет ли он также атрибуты класса и данных? Вы можете связать, используя их в качестве альтернативы (или вообще ничего, если это единственная форма на странице)
@EzraMorse Механизм шаблонов фактически ничего не удаляет. Это происходит исключительно в Chrome. Тег класса остается, но теги данных также удаляются.
ФОРМА обернута внутри КАДРА? Я добавил laravel и blade - теги , даже я не уверен , что это соответствующие них. «Эксперт» по этому шаблону может тогда взглянуть на него
@ A.Wolff Да, форма в фрейме. Я просматриваю содержимое iframe, когда смотрю на это, и JS загружается внутри iframe для этого. Тот же домен.
Поэтому, чтобы получить к нему доступ, попробуйте: $(window).on('load', function(){console.log($('iframe").contents().find("form.form-vertical").length);});
@ A.Wolff Самс результат. Не отображается как существующее. Я также попытался получить конкретный, так как он загружается jQuery colorbox и сделал: console.log('len: ' + $('iframe.cboxIframe').contents().find("form.form-vertical").length); Нет, кости, хотя.
Вы должны попытаться получить к нему доступ после загрузки IFRAME, а не до этого. Если все еще не работает, я не в себе :(
@ A.Wolff На самом деле, я только что попробовал $('iframe.cboxIframe').contents().find("form.form-vertical").length из консоли Chrome dev, и он показывает, что он существует. Если я делаю тот же код из блока кода JS внизу страницы, он показывает, что его не существует, что не имеет смысла, поскольку iframe загружается при выполнении вызова .ready() (и это в этом).
@ A.Wolff В любом случае, спасибо вам и остальным за помощь в достижении этой точки. Это очень странная ошибка, с которой мне придется постоянно биться. Кстати, спасибо за указание на расхождение в моем понимании с тем, что было опубликовано в: stackoverflow.com/questions/3528509/…

eComEvo · Answer 1 · 2015-02-21T18-26-00.000Z

Пробег через все имена форм, используя .each() и обнаружил, что форма была вызвана templates (множественное число), несмотря на то, что многие перезагрузки меня заменили на template. Что-то в системе шаблонов фактически кэшировало эту часть кода, и очистка кеша шаблона разрешила проблему.

Все JS теперь работают без изменений.

Эта тема, вероятно, должна быть закрыта или удалена, так как в конце концов она не стала реальной проблемой JS или jQuery.