Dieser Artikel stellt hauptsächlich die Verwendung der JQuery-Ereignisdelegation vor. Er hat einen gewissen Referenzwert. Jetzt kann ich ihn mit allen teilen, die ihn benötigen.
91 //使用事件委托，只在table上绑定一次事件
92 //可以动态绑定事件
93 $('table').on('click','td',function(){
94 //$(this).css('background','orange')
95 alert('click_td')
96 })2. Was sind die Vorteile der Eventdelegation?
91 //使用事件委托，只在table上绑定一次事件
92 //可以动态绑定事件
93 $('table').on('click','td',function(){
94 //$(this).css('background','orange')
95 alert('click_td')
96 }) 91 //使用事件委托，只在table上绑定一次事件
92 //可以动态绑定事件
93 $('table').on('click','td',function(){
94 //$(this).css('background','orange')
95 alert('click_td')
96 })4 per Code und dynamisch hinzugefügt Was ist der Unterschied zwischen Elementen?
73 //如果不是动态创建的，可以直接绑定事件
74 $('<p></p>').appendTo($('body'))
75 $('<p></p>').appendTo($('body'))
76 $('<p></p>').appendTo($('body'))
77 $('p').on('click',function(){
78 $(this).css('background','orange')
79 })5 Welche Verwendungsszenarien gibt es für die Ereignisdelegierung?
91 //使用事件委托，只在table上绑定一次事件
92 //可以动态绑定事件
93 $('table').on('click','td',function(){
94 //$(this).css('background','orange')
95 alert('click_td')
96 })6. Wie füge ich einer Tabelle dynamisch Zeilen und Spalten hinzu?
87 $('#btn1').click(function(){
88 $('<tr><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('table')
89 })2. So verwenden Sie die JQuery-Ereignisdelegierung
<!DOCTYPE html>
<html>
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
input{width: 100px;height: 30px;}
div{width: 50px;height: 50px;border:1px solid green;display: inline-block;margin-left: 15px}
td{width: 50px;height: 20px;background: #ccc}
</style>
</style>
</head>
<body>
<h3>jQuery事件对象</h3>
<input id="btn1" type="button" value="事件绑定"><br>
<div></div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script type="text/javascript">
$(function(){
/*
//使用事件委托动态绑定事件
$('#btn1').on('click',function(){
$("<div></div>").appendTo($('body'))
})
// $('div').on('click',function(){
// $(this).css('background','orange')
// })
$(document).on('click','div',function(){
$(this).css('background','orange')
})
//移出事件委托
$(document).off('click','div')
//如果不是动态创建的，可以直接绑定事件
$('<div></div>').appendTo($('body'))
$('<div></div>').appendTo($('body'))
$('<div></div>').appendTo($('body'))
$('div').on('click',function(){
$(this).css('background','orange')
})
//每一个td绑定一个事件
//不能动态的添加事件,效率低
$('td').on('click',function(){
alert('click_td')
})
*/
$('#btn1').click(function(){
$('<tr><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('table')
})
//使用事件委托，只在table上绑定一次事件
//可以动态绑定事件
$('table').on('click','td',function(){
//$(this).css('background','orange')
alert('click_td')
})
})
</script>
</body>
</html>Ereignisse zu dynamischen Elementen hinzufügen
Ereignisse werden nur einmal gebunden, hohe EffizienzDas Obige ist hoffentlich der gesamte Inhalt dieses Artikels Es wird für alle nützlich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!
Verwandte Empfehlungen:
Node.js verwendet Superagent, um GET/ zu simulieren POST-Anfrage
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die JQuery-Ereignisdelegierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
