Question

我有一个HTML文件，如下所示：

<html>
    <head><title>jQuery beginner</title></head>
    <body>
        <div id='my_div'>Some random generated value</div>
        <button id="submit_button">submit</button>
    </body>
</html>

我希望隐藏<div id="my_div">元素，直到点击<button id="submit_button">为止。

所以在我的Javascript文件中，我写了以下代码：

$(document).ready(function() {
    $('#my_div').hide();
});

$('#submit_button').click(function() {
    $('#my_div').show();
});

这个脚本和HTML在Google Chrome中运行良好，但令人惊讶的是它在Internet Explorer 9中也可以使用，但在Firefox中不起作用。

我在SO上阅读了其他一些问题并尝试了其他类似的选择

$('#my_div').css('display','block')，
$('#my_div').css('display','inline-block')，
$('#my_div').css('display','block-table')，
$('#my_div').attr('style','display:block')

但上述解决方案均无法在Firefox中使用。

这个问题有解决办法吗？

我观察到的另一件事是，如果我在页面加载时保持div可见，然后使用按钮点击事件切换它的显示，它就可以工作。

为什么只在Firefox中发生这种情况？

Answer 1

但你错过了试试这个:)

即将event binding代码包装到doc ready handler。

$(document).ready(function() {
    $('#my_div').hide();
    $('#submit_button').click(function() {
       $('#my_div').show();
    });
});

Answer 2

将代码包含在ready handler中：

$(document).ready(function() {
    $('#my_div').hide();

$('#submit_button').click(function() {
    $('#my_div').show();
});
});

jquery（＆＃39; #div_id＆＃39;）。show（）无法在firefox中运行

2 个答案: