<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<title>0325_JQuery_Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
$(document).on('click', '#button', function(event, p1, p2){
console.log(arguments);
console.log(p1);
console.log(p2);
});
$(document).on('click', '#button1', function(){
$('#button').trigger('click', [$(this).text()]);
});
$(document).on('click', '#button2', function(){
$('#button').trigger('click', [$(this).text(), 'ほげほげ']);
});
//こんな書き方もできる ボタンのID
$("#button_another").click(function(){
console.log("button_another_click")
});
});
</script>
</head>
<body>
<a href=http://qiita.com/nfnoface/items/04c4e1df59c79322c82b target=_blank>http://qiita.com/nfnoface/items/04c4e1df59c79322c82b</a>を参考にしています。
<br>
jQueryを使用しています。<br>
ボタンを押して、コンソールのログを見るとそれぞれのボタンの出力がわかります。
<button id="button">BUTTON</button><br/><br/>
<button id="button1">ボタン1</button><br/><br/>
<button id="button2">ボタン2</button><br/><br/>
<button id="button_another">別の方法</button><br/><br/>
<br>
別のクリック方法<br>下はボタンではないけれど、クリックするとJSが動作します。<br>
なお、ブラウザでは何も変化せず、コンソールに出力されます。
参考にしたのは<br>
<a href=http://naoyashiga.hatenablog.com/entry/2013/10/22/150030 target=_blank>http://naoyashiga.hatenablog.com/entry/2013/10/22/150030</a><br>
<p id='nameless'>nameless function</p>
<p id='name'>name function</p>
<p id='test'>test</p>
<p id='bind'>bind</p>
<p id='click'>click</p>
<script>
function name(){
console.log("name");
}
function badSample(t){
console.log("badSample:" + t);
}
function bindSample(event){
//bindSample:100
console.log("bindSample:" + event.data.num);
}
function clickSample(event){
//clickSample:100
console.log("clickSample:" + event.data.num);
}
$("#nameless").click(function(){
console.log("nameless");
});
$("#name").click(name);
$("#test").click(badSample(100));
$("#bind").bind("click",{num : 100},bindSample);
$("#click").click({num : 100},clickSample);
</script>
<br>
<br>
別のボタンクリックに処理のサンプル<br>
<a href=http://semooh.jp/jquery/api/events/trigger/type,+%5Bdata%5D/>http://semooh.jp/jquery/api/events/trigger/type,+%5Bdata%5D/</a>
<br>
Button#1をクリックすると数が増加します<br>
Button#2をクリックすると２つの数が増加します。<br>
<button id="button_sa1">Button #1</button>
<button id= "button_sa2">Button #2</button>
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>
<script>
$("#button_sa1").click(function () {
update($("span:first"));
});
$("#button_sa2").click(function () {
$("#button_sa1").trigger('click');
update($("span:last"));
});
function update(j) {
var n = parseInt(j.text(), 0);
j.text(n + 1);
}
</script>
<pre>
$(function(){
//処理
});
</pre>
と
<pre>
$(window).on("load",function(){
//処理
});
</pre>
の違いは、読み込みデータの違いらしい。<br>
functionはHTMの読み込みが終了したタイミングで実行され、windowの方は画像やJSやCSSのすべてのデータが読み込まれてから実行されるのだそうです。
</body>
</html>
