Typically, we write trigger events through jQuery, which is obj. event type ().
Here's an example of a click event:
Usually we write obj.click(); to achieve the effect of click events, but this writing does not support dynamic element or style binding events.
Dynamic element binding events are supported by. live() and. on(). Live is not recommended after jQuery 1.7.
In-line onclick events can also implement dynamic binding events for js.
Following is my own arrangement of the use of the three ways of writing for future viewing:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="content">
<button id="add" onclick="add()">Add to</button>
<button id="onadd" onclick="onAdd()">on Add to</button>
<ul id="ul">
<li>Menu 1 <span onclick="delect(this);">delete</span></li>
<li>Menu two<span onclick="delect(this);">delete</span></li>
<li>Menu three<span>delete</span></li>
<li>Menu four<span>delete</span></li>
<li>Menu five<span>delete</span></li>
<li>Menu six<span>delete</span></li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script>
function add(){
$('#Append ('< li > menu 666 < span > delete < / span > < / Li >')
}
function onAdd(){
$('#Append ('< li > on menu 666 < span on Click = "delect (this);"> delete < / span > < / Li >')
}
function delect(obj){
$(obj).parent().remove();
console.log('onclick');
}
/*$('ul li span').click(function(){
$(this).parent().remove();
console.log('click');
});*/
$(document).on('click','#ul li span',function(){
$(this).parent().remove();
console.log('on');
});
</script>
</body>
</html>