Penjelasan terperinci tentang cara menggunakan jquery event delegate()_jquery

Mari kita lihat dahulu apa yang dikatakan oleh pegawai tentang kaedah delegate() Kaedah delegate() menambah satu atau lebih pengendali acara pada elemen yang ditentukan (elemen anak bagi elemen yang dipilih) dan menetapkan bahawa ia akan dijalankan apabila. peristiwa ini berlaku. Fungsi, pengendali acara menggunakan kaedah delegate() digunakan pada elemen semasa atau akan datang (seperti elemen baharu yang dicipta oleh skrip).
Sintakssangat mudah

$(selector).delegate(childSelector,event,data,function)

Penerangan Parameter

• childSelector Diperlukan. Menentukan satu atau lebih elemen anak yang mana pengendali acara dilampirkan.
• acara Diperlukan. Menentukan satu atau lebih acara untuk dilampirkan pada elemen.
• Berbilang nilai acara dipisahkan oleh ruang. Mesti acara yang sah.
• data Pilihan. Menentukan data tambahan untuk dihantar ke fungsi.
• fungsi diperlukan. Menentukan fungsi untuk dijalankan apabila peristiwa berlaku.

Fungsi perwakilan dipanggil oleh unsur induk biasa bagi jenis tertentu.

listNode.delegate('.condition-remove','click',function(e){
e.preventDefault();
$(this).parents('.search-condition-item').remove();
});

Contoh lengkap (kesan yang perlu dicapai)

function renderSearchConditions(selectionId,conditions){var conditionsTemplate = '<div class="search-conditions-list-section">'+
'<ul class="search-conditions-list"></ul>'+
'</div>',
listNode = $(conditionsTemplate);
listItemTemplate = '<li class="search-condition-item" data-type="{conditonType}"><span>{condition}</span><a class="condition-remove" href="#">x</a></li>';
for(var key in conditions)
{
var condition = conditions[key].keyword,
conditionType = conditions[key].type,
listItemNode = $.substitute(listItemTemplate,{conditionType:conditionType,condition:condition});
listNode.append(listItemNode);
}
$(selectionId).prepend(listNode);
listNode.delegate('.condition-remove','click',function(e){
e.preventDefault();
$(this).parents('.search-condition-item').remove();

});
}

1 Dalam urus niaga terikat, dapatkan sumber urus niaga, panggil kaedah sembunyikan, dan masukkan objek sumber urus niaga:

$(document).delegate("body"， "click"， function(e) {
  var ev = e || window.event; // 事务
  //var target = ev.target || ev.srcElement; // 获得事务源
  hide(ev.target || ev.srcElement， true);
 });

$(window) pada asalnya digunakan, tetapi sebelum IE8, ia kelihatan mempunyai pepijat.
Kelemahan $(dokumen) ialah ia akan dicetuskan sekali selepas halaman dimuatkan...
2. Dalam kaedah sembunyikan, tentukan sama ada sumber urus niaga dipancarkan daripada elemen yang ditentukan, iaitu sama ada elemen sumber urus niaga ialah elemen anak bagi elemen yang ditentukan atau dirinya sendiri.

//子元素断定====
 if (!!window.find)HTMLElement.prototype.contains = function(B) {
  return this.compareDocumentPosition(B) - 19 > 0
 };
 function hide(dom， isClick) {
  var nn，t，_isClick = !!isClick;
  try {
   for (var n in objList) {
    nn = objList[n];
    t = nn.getOption("target")[0];
    if (_isClick && (t == dom || t.contains(dom)))return;
    if (!_isClick || !nn.box[0].contains(dom)) nn.hide();
   }
  } catch(e) {
  }
 }

3 Dalam kaedah sembunyikan di atas, pembolehubah isClick menentukan sama ada peristiwa klik dicetuskan. Untuk mengendalikan saiz semula. Ubah saiz menggunakan settimeout untuk pemprosesan untuk mengurangkan penggunaan memori.

var reTime = null;
 $(window).bind("resize"， function() {
  if (reTime) clearTimeout(reTime);
  reTime = setTimeout(hide， 50);
 });

Di atas adalah mengenai penggunaan jquery event delegate().