.trigger()
要素に対し、指定したイベントタイプを実行させます。
- .trigger( eventType [, extraParameters] ) 1.0追加
- .trigger( event ) 1.3追加
- サンプル
- デモ
- submit処理が実行されない現象について
本来のイベントを発生させずにjQueryを通してバインドさせたイベントだけを実行させたい場合は、 .triggerHandler()を使用してください。
.trigger( eventType [, extraParameters] ) 1.0追加
戻り値:jQuery
| 引数 | 説明 |
|---|---|
| eventType | 'click'や'submit'等のjavaScriptイベントの文字列を指定します。 |
| [extraParameters] | イベントハンドラに渡したいデータを指定します。 |
$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
下記のように、.trigger()の2つ目に指定した配列データをイベントに渡すことができます。 jquery1.6.2以降、配列ではない単一の値も指定することが可能です。
$('#foo').bind('custom', function(event, param1, param2) {
alert(param1 + "
" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);
.trigger( event ) 1.3追加
戻り値:jQuery
| 引数 | 説明 |
|---|---|
| event | jQueryのEventオブジェクトを指定します。 |
var event = jQuery.Event("submit");
$("form:first").trigger(event);
if ( event.isDefaultPrevented() ) {
// Perform an action...
}
サンプル
$("p").click( function (event, a, b) {
// 通常のクリックでは、aとbはundefinedですが、下記のように
// triggerを使用すれば、"foo"と"bar"の値を渡すことが出来ます。
} ).trigger("click", ["foo", "bar"]);
eventオブジェクトを通して、任意のデータを渡しています。
var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);
次のようにしてデータを渡すことも可能です。
$("body").trigger({
type:"logged",
user:"foo",
pass:"bar"
});
デモ
ボタン#2はボタン#1に対してのtrigger処理も行なっています。
<!DOCTYPE html>
<html>
<head>
<style>
button { margin:10px; }
div { color:blue; font-weight:bold; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>ボタン #1</button>
<button>ボタン #2</button>
<div><span>0</span> ボタン #1 クリック</div>
<div><span>0</span> ボタン #2 クリック</div>
<script>
$("button:first").click(function () {
update($("span:first"));
});
$("button:last").click(function () {
$("button:first").trigger('click');
update($("span:last"));
});
function update(j) {
var n = parseInt(j.text(), 10);
j.text(n + 1);
}
</script>
</body>
</html>
submit処理が実行されない現象について
© 2010 - 2017 STUDIO KINGDOM