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

Posted 2023-03-14

【中文标题】Safari 浏览器无法处理 Click 事件以显示加载图像

【英文标题】：Safari browser not working on Click event to show loading image

【发布时间】：2014-04-02 09:57:20

【问题描述】：

我必须在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。

【问题讨论】：

id 是唯一的，您可以使用#cancel 代替input#cancel

您能否更具体地说明什么不起作用？当我使用jsfiddle.net/FW9Tx 重新创建它并将 chrome 作为 Safari 5.0.4 运行时，它会显示警报和“请稍候”消息...

@PazcaldeJonge 加载图像不会显示在 Safari 中，因为单击“取消”按钮

【参考方案1】：

使用$(document).on('click','input#cancel') 可以说是阅读交互的很多元素。如果你没有使用低于 1.5 的 jQuery 版本，我认为你可以使用 .click 作为 eventHandler。您的选择器也可以使用一些简化。 jQuery 选择就像 $('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();

希望这对您的 Safari 问题有所帮助。