jQuery クリックイベントを追加する

jQueryを使って、クリックイベントを簡単に追加することができます。

aタグにクリックイベントを追加する。

$("a").click(function(){
	alert("click a!");
} );

divでidがmessage2のものにクリックイベントを追加します。

$("div#message2").click(function(){
	alert("click message2!");
} );

idがmessage3のものにクリックイベントを追加します。

$("#message3").click(function(){
	alert("click message3!");
} );

click関数を使ったサンプルコード

<html>
<head>
	<title>jQuery</title>
</head>
<body>
	<div id="message1">div 1</div>
	<div id="message2">div 2</div>
	<div id="message3">div 3</div>
	<a href="#">a 1</a><br>
	<a href="#">a 2</a><br>
	<a href="#">a 3</a><br>
</body>
<script type="text/javascript" src="jquery-1.2.3.min.js">
</script>
<script type="text/javascript"><!--
	$(document).ready(function(){
		$("a").click(function(){
			alert("click a!");
		} );
		$("div#message2").click(function(){
			alert("click message2!");
		} );
		$("#message3").click(function(){
			alert("click message3!");
		} );
	});
//-->
</script>
</html>

クリックされたdivのinnerHTMLを書き換えるサンプルコード

$("div#message2").click(function(){
	($this).html('clicked');
} );

いつもシェア、ありがとうございます！

もっと情報を探しませんか？

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12