Question

我是这个领域的绝对新手。我写了以下代码，但它不起作用。有人可以解释错误在哪里吗？

<script type="text/javascript">
    $("button").click(function(){
        $("div").show("slow");
    });
</script>

<button>show</button>
<div style="min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
<a href="http://#" style="display: none">this is a link</a>

Answer 1

在按钮出现之前执行jQuery。所以在执行jQuery时，按钮不存在。

解决方案是使用$(document).ready(...)。

页面上的所有元素（HTML）都会被解析为该页面的DOM。 DOM是所有元素的分层集合。您可以使用jQuery从中选择元素。

然而，显然DOM需要完全存在才能选择元素。在您的情况下，首先选择按钮，然后创建。这不起作用。在选择器时，按钮尚不存在。

使用jQuery的$(document).ready()，您可以推迟包含选择器的函数，直到完全加载和解析DOM为止 - 此时选择器可以工作，因为元素在那里。

 <script type="text/javascript">
$(document).ready(function() {

        $("button").click(function(){
            $("div").show("slow");
        });

});
        </script>

        <button>show</button>
        <div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
         <a href="http://#" style="display: none">this is a link</a>

Answer 2

您的代码在创建按钮之前运行，因此无法绑定事件。

因此，您需要将代码放入document.ready事件中。在jQuery中，这由$(document).ready(handler)或$(handler)处理。

http://api.jquery.com/ready/

上的文档

修复代码以使其正常工作

$(function(){ 
    $("button").click(function(){
        $("div").show("slow");
    });
});

演示http://jsfiddle.net/gaby/vkrzt/

Answer 3

您可能正在尝试在按钮存在之前侦听click事件。尝试等待加载页面内容：

<script type="text/javascript">
    $(document).ready(function() {
        $("button").click(function(){
            $("div").show("slow");
        });
    });
</script>

<button>show</button>
<div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
<a href="http://#" style="display: none">this is a link</a>

Answer 4

正如您可以从这里的小提琴中看到http://jsfiddle.net/bQUFE/您的代码有效（点击时会显示div）

如果您没有此结果，请务必检查：

1）你在脚本之前加载了jquery

2）总是使用$（document）.ready（），如下所示：

$(document).ready(function(){
    $("button").click(function(){
        $("div").show("slow");
    });
});

Answer 5

javascript在文档加载之前执行，因此点击处理程序无法附加到按钮上。要避免这种情况，请将代码包装成domready函数，如下所示：

$(document).ready(function() {
    $("button").click(function(){
        $("div").show("slow");
    });
}

Answer 6

它可能正常工作，但由于<div></div>为空，您可能会注意到它。

另外，请确保在将div添加到HTML之后才运行JQuery脚本。

我还建议使用更好的标识符，因为您的页面上最终可能会有很多div和按钮。

示例：

<button id="btn1">Click me</button>    
<div id="hidden_div" style="display: none">
    Hello there!
</div>

<script type="text/javascript">
   $('button#btn1').click(function() {
        $('div#hidden_div').show('slow');
   });
</script>

Answer 7

你需要给你的元素“id”

这样：

<button id="mybutton"></button>

和

<div id="mydiv"></div>

然后你将使用$（“＃mybutton”）或$（“＃mydiv”）来调用这些

show（）div问题

7 个答案: