show（）div問題

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

你需要給你的元素 「ID」

這樣：

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

和

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

然後您將使用$（ 「＃myButton的」）或$（「＃mydiv」）來調用這些代碼

Answer 3

您的代碼在butto之前運行n被創建，所以它不能綁定事件。

所以你需要把你的代碼放在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 4

您可能試圖以監聽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 5

你可以從這裏小提琴的http://jsfiddle.net/bQUFE/代碼工作（當您單擊DIV所示）看到

如果你沒有這樣的結果經常檢查：

1）你在你的腳本之前加載jquery

2）總是使用$（document）。ready（）像這樣：

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

Answer 6

javascript是在文檔加載之前執行的，所以點擊處理程序不能附加到按鈕上。要避免這種情況，換你的代碼這樣的domready中功能：

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

Answer 7

這可能是工作，但作爲您<div></div>是空的，你可能會注意到它。

此外，請確保您只在您的HTML添加div後運行您的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>