Safari浏览器无法在Click事件上显示加载图片

Question

我必须在“ Cancel按钮单击上显示加载图像，如下所示。在FF，Chrome上似乎工作正常，但在Safari中无法正常工作。

的HTML

<div class="loading" id="overlay">
    <div id="loading_message"></div>
</div>

<input type="submit" name="next_action" id="cancel" formnovalidate value="Cancel">

JS

function ShowDialog(){
  $("#loading_message").html('Please Wait');
  $("#loading_message").css('left','52%');
  $('#overlay').show();    
}
$( document ).on( "click",'input#cancel',function(event) {
        ShowDialog();
});

要补充的另一件事是，如果我在Click事件上设置了alert ，则它会显示警报，然后加载图像将显示如下，但如果没有，它将无法正常工作。

$( document ).on( "click",'input#cancel',function(event) {
        alert('Hello');
        ShowDialog();
});

我也尝试使用setTimeout函数让ShowDialog()暂停并显示消息，但是它不起作用。 你能告诉我吗？ 谢谢你的时间。

更新我正在使用Jquery v1.7.2。

Answer 1

可以说，使用$(document).on('click','input#cancel')有很多元素可以读取交互。 如果您使用的jQuery版本不低于1.5，我认为您可以将.click用作eventHandler。 您的选择器也可以使用一些简化。 jQuery select的工作方式类似于$('element of interest','within this element')但您可以$('element of interest','within this element')基础上进一步发展。 例如，您编写的内容也可以写为$('input#cancel',document) 。 但是不需要查看文档，因为选择内容已经在文档中出现了。

我还必须添加另一件事。 jQuery仅在文档加载后才能“运行”。 因此，需要使用document.ready函数来“检查”文档是否已加载。 这是您代码的更好解决方案。

$(document).ready(function(){//notice the ready function
    $('input#cancel').click(function(event){
        //the element in the selector that initiated the function is now 'this' used as $(this)
        event.preventDefault();//instead, if desired, use return false; to prevent default and propagination
        alert('hello');
        showDialog();
        return true;//to submit the form.
    });
});

jQuery侦听器未调用的函数不一定必须位于document.ready函数中。 因此，我们可以在文档和jQuery选择器中仍然可以使用的其他地方。

function showDialog(){
    $("#loading_message").html('Please Wait');
    $("#loading_message").css('left','52%');
    $('#overlay').show();
}

这应该可以帮助解决您的野生动物园问题。