2014-10-31 7 views
0

У меня есть форма с кнопкой и некоторый jquery для обработки события нажатия кнопки. В IE запускается событие click, а затем форма отправляется (потому что поведение кнопки по умолчанию с IE8 должно отправить форму). Однако в Chrome форма submit никогда не происходит.Различные поведения кнопок для Chrome против IE11

$("#btnAdd").click(function() { 
    console.log('clicked'); 
    $("#btnAdd").prop('disabled', true); 
}); 

<form> 
    <button id="btnAdd">Add</button> 
</form> 

Похоже, что это связано с отключением кнопки. Ожидается ли, что в Chrome кнопка, отключенная onclick, не будет автоматически отправляться, но в IE не имеет значения, отключена ли кнопка или нет?

+0

Вы упоминаете IE11 в заголовке вопроса, но в ссылке тела IE8? о которых вы спрашиваете (или это оба)? –

+3

Вы должны прослушать событие 'submit''

', а не событие' click' '
+0

Я сравниваю Chrome с IE11; поведение, которое я вижу в IE11, - это ожидаемое поведение для IE8 и более поздних версий. – GendoIkari

ответ

-1

Отредактировано: Вместо кнопки, попробуйте:

<script> 
    $(document).ready(function() { 
     $("#btnAdd").click(function() { 
      console.log('clicked'); 
     }); 
    }); 
</script> 
</head> 
<body> 
    <form> 
     <input type="button" id="btnAdd" value="add" /> 
    </form> 

Он работает во всех браузерах.

Редактировать: Не читал ваш вопрос, извините ... этот работает для меня. code in fiddle

1

Я использовал бы событие onsubmit, прикрепленное к самой форме. Таким образом, вы можете предотвратить отправку по умолчанию, отключить кнопку, а затем отправить форму программно.

Я использовал jQuery's one(), поэтому обработчик будет работать только один раз. В противном случае программное представление также инициирует событие и создает бесконечный цикл.

$("#form").one('submit',function (e) { 
    e.preventDefault(); 
    $("#btnAdd").prop('disabled', true); 
    console.log('clicked'); 
    // Below, to submit the form 
    $(this).submit(); 
}); 
<form id="form"> 
    <button id="btnAdd">Add</button> 
</form> 

В приведенном ниже jsfiddle, я использовал setTimeout задержать programatic формы представления. Это просто, чтобы продемонстрировать разделение двух действий: отключить кнопку и отправить.

WORKING EXAMPLE

+0

Спасибо, я на самом деле использовал

+0

Я не уверен, но это может быть информативным: [Ошибка 14443 - Формы не отправляются при отключении кнопки отправки] (https://bugs.webkit.org/show_bug.cgi?id=14443) – showdev