Установка атрибута" type " ввода не работает с методом jQuery attr()

Я просмотрел предыдущие вопросы, но они, похоже, не ответили на то, что со мной происходит.
В моем реальном коде я создаю форму на лету и добавляю к ней две кнопки, одну для отправки, а другую для другой функции. Для этого я устанавливаю атрибут "type" кнопок для "submit" для одного и "button" для другого. Проблема в том, что в Chrome обе кнопки отправляют форму.

код формы: 

form = $(document.createElement('form')).attr('method', 'get').attr('action', defaults.action).appendTo(object);

код для кнопок: 

form.append(
    $(document.createElement('div')).
        attr('class', classesHash.buttonsContainer).
        append(
            $(document.createElement('button')).
                attr('type', 'submit').
                addClass(classesHash.submitButton).
                attr('title', i18n('Filter')).
                attr('value', i18n('Filter')).
                append(i18n('Filter'))
        ).
        append(
            $(document.createElement('button')).
                attr('type', 'button').
                addClass(classesHash.addButton).
                attr('title', i18n('Add filter')).
                attr('value', i18n('Add filter')).
                append(i18n('Add filter')).
            click(addFilter)
        )
);

Я сделал более простой тест с этим HTML-кодом:

<form action="" method="get"><button id="test">test</button></form>

когда Chrome не находит кнопку отправки, любая кнопка отправляет форму.

следующее не работает, форма отправляется при нажатии кнопки:

$('#test').attr('type', 'button');

работает следующее, форма не отправляется при нажатии кнопки:

document.getElementById('test').setAttribute('type', 'button');

форма и кнопка генерируются динамически, и я использую jQuery, поэтому attr() является наиболее очевидным метод. Что-то не так с jQuery core и спецификацией JS Chrome? Он отлично работает в Firefox. Большое спасибо.

6
dom javascript jquery

5 ответов

во-первых, правильный подход:
Чтобы сделать то, что вы хотите в этом случае, перейдите к решению vanilla JavaScript,но проверьте его в IE!

почему:
Причина type не работает, потому что он терпит неудачу в IE (вы не можете chagne type ввода после его добавления в DOM, и он обрабатывается таким же образом), поэтому jQuery выдает ошибку при попытке. Он делает это специально для <input> и <button> элементов, когда изменение type атрибут.

если вы посмотрите в консоли вы увидите это:

ошибка: свойство типа Uncaught не может быть изменено

вот быстрый тест, показывающий этот, проверьте консоль, чтобы увидеть ошибку jQuery.

12

использовать опора вместо attr. Это точно сработает.

пожалуйста, посмотрите на следующий пример кода: 

$("input[name='email']").focusin(function() {
           console.log("alert");
            $('#email').prop('type','number');
});

Дайте мне знать ваши мысли по этому поводу.

спасибо

6

jQuery отлично работает для меня в Chrome ... все функции, которые я бросил на него сегодня, работают нормально, в том числе .буква attr()...

0

Я не на 100% уверен, что вы спрашиваете, но я думаю, что вы спрашиваете о предотвращении отправки формы с помощью кнопки в Chrome. Если это так, почему бы не использовать preventDefault?

$("#test").click(function(e) {
  e.preventDefault();
  //more work here....
});

EDIT:
Я согласен с Ником, что для того, чтобы сделать то, что вы пытаетесь сделать, идите с прямым подходом JavaScript. Но в этом случае вы применяете атрибуты к кнопке, которые не имеют смысла (или, по крайней мере, недействительны). Поскольку вы уже используете jQuery, почему не обработать его должным образом и предотвратить действие по умолчанию при нажатии кнопки в форме?

0

таким образом, этот пост был полезен для меня, но моим решением было клонировать рассматриваемую кнопку и заменить ее

$new = $(this).clone();
$new.attr('type','hidden');
$this_form.append($new);
$(this).remove();
0