suchen

Heim  >  Artikel  >  Web-Frontend  >  So lösen Sie das Problem, dass dynamisch hinzugefügte Elemente mit jQuery keine Bindungsereignisse auslösen können

So lösen Sie das Problem, dass dynamisch hinzugefügte Elemente mit jQuery keine Bindungsereignisse auslösen können

亚连
亚连Original
2018-06-14 11:38:503360Durchsuche

Dieser Artikel stellt hauptsächlich die Lösung des Problems vor, dass jQuery dynamisch hinzugefügte Elemente keine Bindungsereignisse auslösen kann. Er analysiert die Gründe und zugehörigen Lösungen für dynamisch hinzugefügte Elemente, die keine Bindungsereignisse auslösen können, in Form von Beispielen it

Das Beispiel in diesem Artikel beschreibt die Lösung des Problems, dass dynamisch hinzugefügte jQuery-Elemente keine Bindungsereignisse auslösen können. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Ich bin kürzlich auf ein Problem gestoßen, das heißt, nachdem ich jquery zum dynamischen Hinzufügen von Elementen verwendet habe, habe ich festgestellt, dass die dynamisch hinzugefügten Elemente keine Ereignisse auslösen konnten. Später habe ich einige Informationen im Internet überprüft und herausgefunden, dass dies folgendermaßen gehandhabt werden sollte:

Lassen Sie mich zunächst den Code vorstellen, in dem ich den Fehler gemacht habe: 

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" >
  <script src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
//这里是动态添加元素
      $(".add").click(function(){
        var btn = $("<button class=&#39;newBtn btn btn-default&#39;>新按钮</button>");
        $("body").append(btn);
      })<br><br>//这里是为添加的元素添加事件
      $(".newBtn").click(function(){
        alert("这里是新添加的元素触发的事件");
      })
    })
  </script>
</head>
<body>
<button class=" add btn btn-default">添加按钮</button>
</body>
</html>

Hier ist mein Lösung

Methode 1: Live-Ereignisse binden (Live-Ereignisse werden nur unter jquery1.9 unterstützt, nicht von höheren Versionen). 

$(".newBtn").live("click",function(){
///jquery 1.9(不包括1.9)以下可以
  alert(&#39;这里是动态元素添加的事件&#39;);
})

Methode 2: On()-Ereignisbindung verwenden ($(ParentEle).on("click",".thisEle",function(){})

$("body").on("click", ".newBtn", function() {
   alert(&#39;这里是动态元素添加的事件&#39;);
});
//这里的ParentEle是 thisEle的父辈元素或者祖先元素，ParentEle可以是document，也可以是body等。
//注意：如果此时调用的函数是外部定义好的函数，那在调用的时候不要加()，不然会跳过点击事件直接触发函数
rrree

Das Obige habe ich für alle zusammengestellt an alle in der Zukunft.

Verwandte Artikel:

So implementieren Sie eine Tabelle mit jQuery+CSS

Verwenden Sie das http-Modul, um Anfragen über nodejs zu senden (ausführlich Tutorial)

So implementieren Sie die Internationalisierung mit Angular (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass dynamisch hinzugefügte Elemente mit jQuery keine Bindungsereignisse auslösen können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So bedienen Sie das JS-Cookie-PluginNächster Artikel：So bedienen Sie das JS-Cookie-Plugin

In Verbindung stehende Artikel

Mehr sehen