jquery-中的事件委託

貓哥的魚庫發表於2018-01-06
jQuery事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<script src="../js/jquery-1.12.4.min.js"></script>
<script>
$( function () {
// 1.以前的監聽
// 1.1 繫結了 6 次
// 1.2新增的元素 沒有事件

// $(".list li").click(function () {
// $(this).css({"color":"red"});

// })
// var sNew = "<li>" + "新增7個" +"</li>"
// $(".list").html($(".list").html() + sNew);


// 2.委託的寫法 將多個子元素 的事件 委託給 父元素事件
// 減少繫結的次數 提高效能
// 新增的元素 同樣有事件
$(".list").delegate("li","click",function () {
$(this).css({"color":"red"});

// console.log($(this).index());
})
var sNew = "<li>" + "新增7個" + "</li>";
$(".list").html($(".list").html() + sNew);
})
</script>

</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>


</body>
</html>

相關文章