jQuery-笔记 绑定事件on() 解绑事件off() 自动触发事件

案例-发布信息

主要运用

1. on() 可以给动态创建元素添加事件
2. off()解绑事件
3. one() 只能触发事件一次
4. 自动触发事件 元素.事件() 、trigger() 、triggerHandler()

css样式代码

div,p,span,li,ul,textarea,button{margin:0;padding:0;}.box{width:500px;}textarea{width:100%;font-size:14px;}span{width:100%;display:block;background-color:#ccc;}li{width:100%;font-size:14px;height:30px;line-height:30px;}li a{float:right;}

html

<div class="box">
        <span>微博发布</span>
        <textarea name="" id="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>        </ul>
    </div>

jQuery

 $(function() {
     // 1\动态创建LI
     $("button").on("click", function() {
         var li = $("<li></li>");
         li.html($("textarea").val() + "<a href='javascript:;'>删除</a>");

         if ($("textarea").val() == "") {
             alert("请先输入留言文字")
         } else {

             $("ul").prepend(li);
             li.slideDown(); // li加到ul里
             $("textarea").val(""); //清空
         }
     });
     // 给a 添加事件
     $("ul").on("click", "a", function() {
         $(this).parent().slideUp(function() {
             $(this).remove();
         });
     });

     // 解绑事件  off()
     $("button").off(); //解除 此按钮上的所有的绑定的事件
     $("button").off("click"); //只解绑此按钮上的某个事件
     $("ul").off("click", "a"); //解绑某个元素身上的事件
     // one() 只能触发事件一次
     $("span").one("click", function() {
         alert("我心情有点奇怪 ") //点击 一次后，点击不了
     });


     // 自动触 发事件  
     $(function() {
         $("div").on("click", function() {
             alert(11)
         })
     });
     // 元素.事件()
     $("div").click(); //可自动触发事件
     // trigger()
     $("div").trigger("click");

     // 元素  triggerHandler() ：不会触 发元素的默认行为
     $("div").triggerHandler("click");

 })