jQuery 的on()方法

jQuery 的on()方法

1、總結

一句話總結：

一、普通添加事件：$("a").on("click", function () {執行的代碼})

二、未建立元素：$("body").on("click", "a", function (e) {執行的代碼})

三、傳遞參數：$("p").on("click", { "txt": "文本" }, function (e) {$("a").text(e.data.txt);})

 

一、jquery的on方法給元素添加事件？

$("a").on("click", function () {執行的代碼})

$("a").on("click", function () {
    console.log(0)
})

 

 

二、jquery的on方法給未建立的元素添加事件？

$("body").on("click", "a", function (e) {執行的代碼})

$("body").on("click", "a", function (e) {
 
});

 

 

三、jquery的on方法傳遞參數？

$("p").on("click", { "txt": "文本" }, function (e) {$("a").text(e.data.txt);})

$("p").on("click", { "txt": "文本" }, function (e) {
    $("a").text(e.data.txt);
})

 

 

四、jquery的on方法 給未建立的元素添加事件 實例？

給新添加的元素hidden_panel類添加點擊事件：$("body").on("click", ".hidden_panel", function (e) { 執行的代碼 });

<script>
  $(function () {
      $("body").on("click", ".hidden_panel", function (e) {
          $(this).children(".panel-body").toggle();
          $(this).children(".panel-footer").toggle();
          $(this).find(".panel-heading_symbol_left").toggle();
          $(this).find(".panel-heading_symbol_down").toggle();
      });
  });
</script>

 

 

 

2、jQuery on()方法使用

轉自或參考：jQuery on()方法使用
https://www.cnblogs.com/sntetwt/p/10758176.html

jQuery on()方法
基本語法：
語法結構一：

$(selector).on(event,function)

語法結構二：

$(selector).on(events,[selector],[data],function)

語法結構三：

$(selector).on(object,[selector],[data])

　　

結構一：

$("a").on("click", function () {
    console.log(0)
})

結構二[selector]，適用於未建立的元素：

$("body").on("click", "a", function (e) {

});

結構二[data]，函數傳遞：

$("p").on("click", { "txt": "文本" }, function (e) {
    $("a").text(e.data.txt);
})

結構三{object}，綁定不一樣函數：

$("p").on({
    click: function () { $(this).css("color", "green"); },
    mouseover: function () { $(this).css("color", "red"); },               
    mouseout: function () { $(this).css("color", "black"); },
});

off()方法，解除綁定

$("body").on("click","a",function(){
    $("a").off("click");
})

one()方法，綁定一次

$("a").one("click",function(){

});

trigger()方法，關聯事件

$("p").click(function () {
    $("a").trigger("click");
});
$("a").on("click", function () {
    console.log(0)
});