Ausführliche Erklärung, wie die Delegate-Methode in jQuery Ajax-Anforderungsbindungsereignisse implementiert, ohne sie zu verlieren

Nachdem ich ein Klickereignis an ein Element gebunden hatte, stieß ich auf ein Problem: Beim Ausführen einiger Ajax-Anfragen und beim erneuten Aufrufen dieser Seite wurde das darin enthaltene Klickereignis ungültig

Für Beispiel: Mein Paging ist eine Ajax-Anfrage, aber wenn ich auf die nächste Seite klicke, hat das von a generierte Element kein Klickereignis

Probleme bei der Durchführung von Projekten selbst:

Zweck: Kontrollkästchen stapelweise löschen. Wenn Sie auf „Löschen“ klicken, wird das mit jquery an die Schaltfläche gebundene Ereignis „onclick“ ausgelöst, um die Werte aller Kontrollkästchen zu erhalten 🎜>

1. Es gibt kein Problem, wenn Sie smarty zum ersten Mal direkt in die Aufrufseite einfügen, um Datensätze basierend auf einer bedingten Abfrage (Ajax-Implementierung) aufzulisten Ereignis schlägt fehl

Grund: Ajax-Ladeinhalt ist ein Vorgang nach $(document).ready(). Zu diesem Zeitpunkt enthält der beim Binden der Funktion gefundene Satz von Elementen nicht den von Ajax geladenen Inhalt, sodass mit dem Original kein Problem besteht, die später geladenen jedoch nicht gebunden sind

Endgültige Lösung:

1. Verwenden Sie die Delegate()-Methode von jQuery

2. Verwenden Sie native js, um den Wert des Schecks zu schreiben Feld in die Übermittlungsüberprüfungsfunktion ein,

<form method="post" action="channel_code_manage.php?act=removeall" name="listForm" id="deleted" class="fn-mt20" onsubmit="
return
 checkbox();">

Es gibt einen Wert, die Überprüfung wird bestanden und der Wert wird einem versteckten Feldwert zugewiesen

Kein Wert, Rückgabe

function checkbox() {
       var compatibility = "",input = document.getElementsByTagName("input"),value;
       for (var i = 0; i < input.length; i++) {
           if (input[i].type == "checkbox") {
               if (input[i].checked) {
                   value = input[i].value;
                   if(value!=&#39;on&#39;){   　　　　　　　　　　　　　　　　给全选按钮value设置为on  排除此选项
                       compatibility += value + ","; 　　　　　　　　　　拼接字符串
                   }}

}
       }
       compatibility = compatibility.substring(0,compatibility.lastIndexOf(","));  //删除最后的，

 

if(!compatibility){　　//如果字符串为空 ，返回false
           alert(&#39;请选择要删除的记录&#39;);
           return false;
       }else{
           document.getElementById(&#39;getvalues&#39;).value=compatibility;   //如果字符串不为空 把值赋值给隐藏于提交
           confirm(&#39;确定批量删除？&#39;);
       }

 

}

Lösung:

1. Binden Sie das Ereignis erneut, nachdem die Ajax-Anfrage erfolgreich war

2
Verwenden Sie die Methode „delegate(sel,[type],[data],fn) von jquery Die live()-Methode ist veraltet

$(document).delegate('a', 'click', function() { blah() }) Lösen der Ajax-Anfrage für Bindungsereignisse macht nicht ungültig

Das angegebene Element (ein untergeordnetes Element

, das ein ausgewähltes Element ist) fügt einen oder mehrere Ereignishandler hinzu und gibt Funktionen an ausgeführt werden, wenn diese Ereignisse auftreten.

Ereignishandler, die die Methode „delegate()“ verwenden, gelten für aktuelle oder zukünftige Elemente (z. B. neue Elemente, die durch Skripte erstellt wurden).

Parameter:

Selektor: Selektorzeichenfolge für das Filterelement , das das Ereignis auslöst.

Typ:Ein oder mehrere Ereignisse, die dem Element zugeordnet sind. Mehrere durch Leerzeichen getrennte Ereigniswerte. Muss ein gültiges Ereignis sein.

Daten:Zusätzliche Daten, die an die Funktion übergeben werden

fn:Funktion, die ausgeführt wird, wenn das Ereignis auftritt

$(function(){
$('#deleted').delegate("button",'click',function(){  被选元素的子元素---->deleted为form 表单 button为表单中的按钮              
checked = [];            
$('input:checkbox:checked').each(function() {                
checked.push($(this).val());            
});            
$('#getvalues').val(checked);  //给隐藏域设置属性        
})
})

Perfekte Lösung des Problems, haha!

Erweiterung:

Wenn Sie in der alten Version von jQuery auf ein Ereignis im Seiteninhalt eines bestimmten von Ajax geladenen Fragments reagieren müssen, können Sie Folgendes verwenden: Live-Funktion, um auf ihre Ereignisse zu reagieren, wie zum Beispiel: $('a').live('click', function() { blah() });

In neueren Versionen von jQuery verfügt die Live-Funktion über wurde aufgegeben Verwendet,

Wie implementiert man dann die Funktion der Live-Funktion in der neuen Version? Wie reagiert der Inhalt dieses Seitenfragments auf verwandte Ereignisse, wenn das Seitenfragment von Ajax geladen wird?

Es gibt mehrere Methoden. Dieser Artikel stellt nur zwei einfache vor:

• Eine besteht darin, jquery-migrate direkt zu importieren, damit die Live-Funktion verwendet werden kann. aber optimieren Sie nicht die Leistung.

• Die andere besteht darin, die Delegate-Funktion zu verwenden, um die Live-Funktion zu implementieren

• $(document).delegate('a', 'click', function() { blah() });

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie die Delegate-Methode in jQuery Ajax-Anforderungsbindungsereignisse implementiert, ohne sie zu verlieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!