1. 程式人生 > >JQuery應用例項學習 —— 23 事件委託新增結點並alert彈出對應文字

JQuery應用例項學習 —— 23 事件委託新增結點並alert彈出對應文字

事件委託

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="加li">
    <ul>
        <li>春</li>
        <li>夏</li>
        <li>秋</li>
    </ul>
</body>
<script src="jquery.js"></script>
<script>
// 事件委託

// 點選後新增結點
$('input').click(function(){
    $('ul').append('<li>冬</li>');
});

// 點選li框文字alert彈出該對應文字
$('ul').on('click' ,'li', function(){
    //alert(this.innerHTML);
    alert($(this).html() );
});
</script>
</html>