Question

我有一个以下格式的结构，我在Bootstrap模式中显示。

<div>
 <input type="text"/>
 <input type="text"/>
 <button class="jSomeButton" onclick="javascript: return false;"></button>
 <!--Click event handled in Javascript code-->
</div>

$(function(){
   $(".jSomeButton").on('click',function(){
      //Called from Firefox, Chrome and IE
      //Not called from Safari
   });
});

在Firefox，Chrome和IE中，当我填写输入后按Enter / Return键时，触发按钮点击但在Safari [v4.0.3]中，它不会触发按钮点击！相反，它似乎回发到同一页面。

这是Safari中的已知问题吗？如果是，任何解决方法？
如果不是，有人可以帮我解决根本问题吗？

P.S。：
1.我熟悉用于触发按钮点击Enter按键事件的Javascript代码。只是好奇为什么以上在Safari中只能 2.只是为了澄清，当我仍然在输入控件上时按Enter键而不是按Tab键首先对焦于按钮，然后按Enter键。

Answer 1

将输入字段和按钮添加到表单。

尝试使用此功能，但我不确定这是正确的方法。在这种情况下，您最好将两个js侦听器函数添加到输入字段。如

`

  <div>
     <input id="one" type="text"/>
     <input id="two" type="text"/>
     <button class="jSomeButton" onclick="javascript: return false;">               </button>
     <!--Click event handled in Javascript code-->
    </div>



$('#one').keypress(function(e){
if(e.which == 13) {
//call your code

 }
});

$('#two').keypress(function(e){
if(e.which == 13) {
///call your code
 }
});

最好为三个监听器写一个用于按钮，另外两个用于两个输入文件。希望这生病帮助你。我不确定这个解决方案。尝试后请告诉我。

Answer 2

而不是类属性使用id属性onclick事件，

<div>
 <input type="text"/>
 <input type="text"/>
 <button class="jSomeButton" id="jSomeButton" onclick="javascript: return false;"></button>
 <!--Click event handled in Javascript code-->
</div>


$(function(){
   $("#jSomeButton").on('click',function(){
      //Called from Firefox, Chrome and IE
      //Not called from Safari
   });
});

如果您不想添加ID delegate事件document，那么事件将适用于定义了类的DOM。

示例

<script type="text/javascript"> $(function(){ $(document).on('click', ".jSomeButton" ,function(){ alert('works'); }); }); </script>

Answer 3

@Vandesh，

正如评论中所述，我建议您在整个表单周围添加一个表单标记。看看这个JSFiddle更多的想法。

http://jsfiddle.net/JUryD/

我在Safari，Chrome，IE6 +，Opera和Firefox 22 +上试过这个。

如果您遇到其他麻烦，请告诉我。

以下是代码：

<div>
 <form>            
  <input type="text"/>
  <input type="text"/>
  <button class="jSomeButton" onclick="javascript: return false;">Send</button>  
 </form>
</div>

按Enter / Return键不会触发Safari中的按钮单击

3 个答案: