JavaScript Tutorial/jQuery/trigger
Содержание
30. Display a "Hello World!" alert box.
<source lang="javascript">
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + " " + message2);
}); $("p").trigger("myEvent", ["Hello","World!"]);</source>
30. To submit the first form without using the submit() function
<source lang="javascript">
$("form:first").trigger("submit")</source>
30. Trigger a custom event
<source lang="javascript">
<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>
asdf
<button>bn</button> </body>
</html></source>
30. Trigger Another Event
<source lang="javascript">
<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>
header 1
<button value="asdf">asdf</button> </body>
</html></source>
30. Triggered By Select Change Event
<source lang="javascript">
<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>
</body>
</html></source>
30. Trigger handler
<source lang="javascript">
<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>
header 1
<button value="asdf">asdf</button> </body>
</html></source>
30. Triggers the blur event of each matched element
<source lang="javascript">
<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>
<input type="text" /> blur fire
<input type="password" /> blur fire
</body>
</html></source>
30. Trigger Submit Event
<source lang="javascript">
<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!");">
<input type="text" /> <input type="submit" />
</form>
</body>
</html></source>
30. trigger(type , data )
<source lang="javascript">
<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> 0 / 0 </body>
</html></source>