jqueryリンクをクリックしたときのdivのサイズ変更

Question

誰かがリンクをクリックしたときにjqueryを使ってdivのサイズを変更する方法を説明できますか？

このコードは動作していない：

$(".a_link").click(function() { 
    $("#insur_main").css("width","800px"); 
}); 

Answer 1

を動作するはずです）を使用して、要素が完全にロードされたときにイベントがバインドされるようにします。

$(document).ready(function() { 
    $(".a_link").click(function() { 
     $("#insur_main").css("width","800px"); 
    }); 
}); 

Answer 2

をあなたのコードは、あなたが$（ドキュメント）.ready（であなたの文を同封する必要があるかもしれません

$(".a_link").click(function() { 
 
    $("#insur_main").css("width","800px"); 
 
});

#insur_main 
 
{ 
 
    width:100px; 
 
    height:100px; 
 
    background-color:red; 
 
}

<div id="insur_main"> </div> 
 

 
<a href="#" class="a_link">Resize DIV</a>

Answer 3

スクリプトの順序に問題がある可能性があります。

See this example on jsFiddle

<script> 
    alert("Doesn't exist yet " + $(".a_link").length); 
</script> 

<a href="#" class="a_link">Link 01</a> 
<script> 
    alert("Now it does exist " + $(".a_link").length); 
</script> 

<script> 
$(function() { 
    // ondomready it exists 
    alert("Ready " + $(".a_link").length); 
}); 
</script> 

要素がレンダリングされる前に、スクリプトを呼び出すことがあります。まだDOM上には存在しないかもしれません。 DOMに入った後でスクリプトを実行する必要があります。