Penjelasan terperinci tentang tips_jquery penggunaan kaedah jQuery on().

Kaedah jQuery on() ialah kaedah yang disyorkan secara rasmi untuk acara mengikat.

Salin kod Kod adalah seperti berikut:

$(selector).on(event,childSelector,data,function,map)

Beberapa kaedah biasa sebelum ini dikembangkan daripada ini termasuk.

Salin kod Kod adalah seperti berikut:

bind()

　$("p").bind("klik",fungsi(){
alert("Perenggan telah diklik.");
});

　$("p").on("klik",fungsi(){
alert("Perenggan telah diklik.");
});

wakilkan()

　$("#div1").on("klik","p",function(){
　　$(ini).css("warna latar belakang","merah jambu");
});

　$("#div2").delegate("p","klik",function(){
　　$(ini).css("warna latar belakang","merah jambu");
});

hidup()

　$("#div1").on("klik",fungsi(){
　　$(ini).css("warna latar belakang","merah jambu");
});

　$("#div2").live("klik",fungsi(){
　　$(ini).css("warna latar belakang","merah jambu");
});

Tiga kaedah di atas tidak disyorkan selepas jQuery 1.8 Pegawai telah membatalkan penggunaan kaedah live() dalam jQuery 1.9, jadi disyorkan untuk menggunakan kaedah on().

petua: Jika anda perlu mengalih keluar kaedah terikat pada on(), anda boleh menggunakan kaedah off().

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi(){
​$("p").on("klik",fungsi(){
　　$(ini).css("warna latar belakang","merah jambu");
});
​$("butang").klik(fungsi(){
　　$("p").off("klik");
});
});

petua: Jika acara anda hanya memerlukan satu operasi, anda boleh menggunakan kaedah one()

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi(){
​$("p").one("klik",fungsi(){
　　$(this).animate({fontSize:" =6px"});
});
});

cetus() mengikat

Salin kod Kod adalah seperti berikut:

$(selector).trigger(event,eventObj,param1,param2,...)
$(dokumen).sedia(fungsi(){
​$("input").select(function(){
　　$("input").selepas("Teks ditanda!");
});
​$("butang").klik(fungsi(){
　　$("input").trigger("select");
});
});

Berbilang acara terikat pada fungsi yang sama

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi(){
$("p").on("mouseover mouseout",function(){
$("p").toggleClass("intro");
});
});

Berbilang acara terikat kepada fungsi yang berbeza

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi(){
$("p").on({
mouseover:function(){$("body").css("background-color","lightgrey");},
mouseout:function(){$("body").css("background-color","lightblue");},
Klik:function(){$("body").css("background-color","kuning");}
});
});

Ikatan acara tersuai

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi(){
$("p").on("myOwnEvent", fungsi(event, showName){
$(this).text(showName "! Sungguh cantik nama!").show();
});
$("butang").klik(fungsi(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});

Haluskan data untuk berfungsi

Salin kod Kod adalah seperti berikut:

fungsi pengendaliName(event)
{
makluman(event.data.msg);
}

$(dokumen).sedia(fungsi(){
$("p").on("klik", {msg: "Anda baru sahaja mengklik saya!"}, nama pengendali)
});

Berlaku pada elemen yang belum dicipta

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi(){
$("div").on("klik","p",function(){
$(this).slideToggle();
});
$("butang").klik(fungsi(){
$("

Ini ialah perenggan baharu.

").insertAfter("butang");
});
});