Jquey(绑定事件)

Posted 2020-11-03 gaoyukun

绑定事件一：属性中绑定(和js第一种绑定方法一样)

<div class="div1" onclick="fun1()">div1</div>
<script>
    function fun1(){
        alert(this.innerhtml);
    }
</script>

绑定事件二：script标签中绑定

<div class="div1">div1</div>
<script>
    $(".div1").click(function(){
        alert(this.innerText);
    })
</script>

绑定事件三：bind      bind绑定的事件对动态添加的标签没有用（点击新添加的li标签不会弹出“123”窗口）

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<input type="button" value="+" class="input">
<script>
    $("#ul1 li").bind("click",function(){
        alert(123);
    });
    $(".input").bind("click",function(){
       $("#ul1").append("<li>555</li>");
    });
</script>

绑定事件四：on（有效解决了bind中的问题:动态添加的li标签点击后也能弹出“123”窗口）-->

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<input type="button" value="+" class="input">
<script>
    $("#ul1").on("click","li",function(){
        alert(123);
    });
    $(".input").bind("click",function(){
       $("#ul1").append("<li>555</li>");
    });
</script>
</body>
</html>