JavaScript Tutorial/jQuery/trigger
Содержание
- 1 30. Display a "Hello World!" alert box.
- 2 30. To submit the first form without using the submit() function
- 3 30. Trigger a custom event
- 4 30. Trigger Another Event
- 5 30. Triggered By Select Change Event
- 6 30. Trigger handler
- 7 30. Triggers the blur event of each matched element
- 8 30. Trigger Submit Event
- 9 30. trigger(type , data )
30. Display a "Hello World!" alert box.
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + " " + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
30. To submit the first form without using the submit() function
$("form:first").trigger("submit")
30. Trigger a custom event
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
});
$("button").click(function () {
$("div").trigger("myCustomEvent", [ "asdf" ]);
});
});
</script>
<style>
div { width:50px; height:70px; float:left; margin:5px;
background:rgb(255,140,0); cursor:pointer; }
</style>
</head>
<body>
<body>
<div>asdf</div>
<button>bn</button>
</body>
</html>
30. Trigger Another Event
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1").click(function () {
alert("h1");
});
$("button:last").click(function () {
$("h1").trigger("click");
});
});
</script>
</head>
<body>
<body>
<div><h1>header 1</h1></div>
<button value="asdf">asdf</button>
</body>
</html>
30. Triggered By Select Change Event
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
}).trigger("change");
});
</script>
</head>
<body>
<select name="A" multiple="multiple">
<option>A</option>
<option selected="selected">B</option>
<option>C</option>
</select>
<div></div>
</body>
</html>
30. Trigger handler
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1").click(function () {
alert("h1");
});
$("button:last").click(function () {
$("h1").triggerHandler("click");
});
});
</script>
</head>
<body>
<body>
<div><h1>header 1</h1></div>
<button value="asdf">asdf</button>
</body>
</html>
30. Triggers the blur event of each matched element
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").blur(function () {
$(this).next("span").css("color","red");
});
});
</script>
</head>
<body>
<body>
<p><input type="text" /> <span>blur fire</span></p>
<p><input type="password" /> <span>blur fire</span></p>
</body>
</html>
30. Trigger Submit Event
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function() {
alert("submit");
return false;
});
$("form:first").submit();
});
</script>
</head>
<body>
<body>
<form action="javascript:alert("success!");">
<div>
<input type="text" />
<input type="submit" />
</div>
</form>
<div></div>
</body>
</html>
30. trigger(type , data )
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("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(), 0);
j.text(n + 1);
}
});
</script>
</head>
<body>
<body>
<button>1</button>
<button>2</button>
<span>0</span> /
<span>0</span>
</body>
</html>