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();
});

要添加的另一件事是，如果我将alert放在Click事件上，那么它会显示警告，然后加载图片将显示如下，但没有它不起作用。

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

我还尝试使用setTimeout ShowDialog()函数来暂停和显示消息，但它无效。你能告诉我吗？谢谢你的时间。

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

Answer 1

使用$(document).on('click','input#cancel')可以说很多元素来阅读互动。如果你没有使用低于1.5的jQuery版本，我认为你可以使用.click作为eventHandler。您的选择器也可以使用一些简化。 jQuery select的工作方式与$('element of interest','within this element')类似，但您可以在这些方面进行大量的构建。例如，你所写的内容也可以写成$('input#cancel',document)。但是不需要查看文档，因为select已经在文档中查找。

我必须补充的另一件事。 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();
}

这有助于解决您的野生动物园问题。

Safari浏览器无法处理Click事件以显示加载图像

1 个答案: