event
in Programming on jQuery
jQuery
event
<script>
$(function(){
// Click, dblclick, keypress, on)
// Q1. print select value + text value when user click the search button
$("#searchButton").click(function(){
var searchKey = $("#searchKey").val();
var searchValue = $("#searchValue").val();
console.log("searchKey",searchKey);
console.log("searchValue",searchValue);
})
// Q2. print select, text value when we enter searchValue tag
$("#searchValue").keypress(function(event){
if(event.keyCode == 13){ // enter = keycode 13
var searchKey = $("#searchKey").val();
var searchValue = $("#searchValue").val();
console.log("searchKey",searchKey);
console.log("searchValue",searchValue);
})
}
});
</script>
<body>
<div>
<select id="searchKey">
<option value="first">first value</option>
<option value="second">second value</option>
<option value="third">third value</option>
</select>
<input type="button" id="searchValue" />
<input type="button" id="searchButton" value="Click" />
</div>
</body>
<script>
$(function(){
// Q3. text Tag will be added on the div "addLayer" when you click the button
$("#addButton").click(function(function){
var textTag = "<input type='text' value='temp value'/>";
$("#addLayer").append(textTag);
})
});
</script>
<body>
<div>
<input type="button" id="addButton" value="add"/>
</div>
<div id="addLayer"></div>
</body>
Plus, use before + after function
<script>
$(function(){
var textTag = "<input type='text' value='temp value'/>";
$("#beforeAddButton").click(function(function){
$("#addLayer").before(textTag);
});
$("#afterAddButton").click(function(function){
$("#addLayer").after(textTag);
});
});
</script>
<body>
<div>
<input type="button" id="beforeAddButton" value="beforeAdd"/>
<input type="button" id="afterAddButton" value="afterAdd"/>
</div>
<div id="addLayer">
<h2>this is line</h2>
</div>
</body>
on (dynamic event)
<script>
$(function(){
$("#addBtn").click(function()){
var tag = '<input type="button class="alertbutton" value="Click" />';
$("#addLayer").append(tag);
});
$(document).on("click",".alertButton,function(){
alert("Click!!");
})
});
</script>
<body>
<input type="button" id="addBtn" value="add"/>
<div id="addLayer">
<input type="button" id="alertButton" value="click"/>
</div>
</body>