Event kann nicht an dynamisch angehängtes Bildelement gebunden werden

Question

Ich habe einen Code unten, um auf mein dynamisch hinzugefügtes Bild zuzugreifen, um die Zeile zu löschen. Allerdings habe ich keine alert bekommen. HTML-Struktur hinzugefügt. Bitte prüfe.

$(document).on("click", ".popup-trigger", function (e) { 
 
\t //Some code to get some input 
 
\t \t 
 
\t \t \t \t \t \t \t 
 
\t \t //Call PopulateTable2 servlet to get the Inspection row details 
 
\t \t $.ajax({ 
 
\t \t \t url : 'PopulateTable2', 
 
\t \t \t type: 'POST', 
 
\t \t \t dataType: 'json', 
 
\t \t \t data: JSON.stringify({"inspinp" :inspinp}), 
 
\t   contentType: 'application/json', 
 
\t   mimeType: 'application/json', 
 
\t \t \t success : function(responseJson) { \t \t \t 
 
\t \t \t \t if(responseJson.length!=0){ 
 
\t \t \t \t \t if(responseJson && responseJson[0] && responseJson[0].actual1) { 
 
\t \t \t \t \t \t // find reponseJson as actual values; if found, then made that as read only(i.e., inspection data exist) 
 
\t \t \t \t \t \t $("#tab_logic").find("tr:gt(0)").remove(); 
 
\t \t \t \t \t \t var tableinsp = $("#tab_logic"); 
 
\t \t \t \t \t \t $.each(responseJson, function(key,value) { 
 
\t \t \t \t \t \t \t var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"); 
 
\t \t \t \t \t \t \t \t rowNew.children().eq(0).text(value['parameters']); 
 
\t \t \t \t \t \t \t \t rowNew.children().eq(1).text(value['specifications']); 
 
\t \t \t \t \t \t \t \t rowNew.children().eq(2).text(value['actual1']); 
 
\t \t \t \t \t \t \t \t rowNew.children().eq(3).text(value['actual2']); 
 
\t \t \t \t \t \t \t \t rowNew.children().eq(4).text(value['actual3']); 
 
\t \t \t \t \t \t \t \t rowNew.children().eq(5).text(value['actual4']); 
 
\t \t \t \t \t \t \t \t rowNew.children().eq(6).text(value['actual5']); 
 
\t \t \t \t \t \t \t \t rowNew.appendTo(tableinsp); 
 
\t \t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t $("#addrow").hide(); 
 
\t \t \t \t \t \t $("#save").hide(); 
 
\t \t \t \t \t \t $("p").hide(); \t \t \t \t \t 
 
\t \t \t \t \t }else { 
 
\t \t \t \t \t \t // else, received response only criteria from QC_CRITERIA table and made it as user editable form 
 
\t \t \t \t \t \t $("#tab_logic").find("tr:gt(0)").remove(); 
 
\t \t \t \t \t \t var tableinsp = $("#tab_logic"); 
 
\t \t \t \t \t \t $.each(responseJson, function(key,value) { 
 
\t \t \t \t \t \t \t var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"); 
 
\t \t \t \t \t \t \t \t rowNew.children().eq(0).text(value['parameters']); 
 
\t \t \t \t \t \t \t \t rowNew.children().eq(1).text(value['specifications']); 
 
\t \t \t \t \t \t \t \t rowNew.children().eq(2).html(''); 
 
\t \t \t \t \t \t \t \t rowNew.children().eq(3).html(''); 
 
\t \t \t \t \t \t \t \t rowNew.children().eq(4).html(''); 
 
\t \t \t \t \t \t \t \t rowNew.children().eq(5).html(''); 
 
\t \t \t \t \t \t \t \t rowNew.children().eq(6).html(''); 
 
\t \t \t \t \t \t \t \t rowNew.children().eq(7).html('<img src="delete.gif" height="42" width="42" alt="idata" class="del">'); // delete image add 
 
\t \t \t \t \t \t \t \t rowNew.appendTo(tableinsp); 
 
\t \t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t $("#addrow").show(); 
 
\t \t \t \t \t \t $("#save").show(); 
 
\t \t \t \t \t \t $("p").show(); \t 
 
\t \t \t \t \t } \t 
 
\t \t \t \t // \t return false; 
 
\t \t \t \t }else{ 
 
\t \t \t \t \t $("#tab_logic").find("tr:gt(0)").remove(); 
 
\t \t \t \t \t $('#tab_logic tbody').append('<tr><td>....</td><td><img src="delete.gif" height="42" width="42" alt="idata" class="del"></td></tr>'); // here also i am adding delete image 
 
\t \t \t \t \t $("#addrow").show(); 
 
\t \t \t \t \t $("#save").show(); 
 
\t \t \t \t \t $("p").show(); \t \t 
 
\t \t \t \t } 
 
\t \t \t } 
 
    }); 
 
\t \t \t 
 
\t \t //unbind all event triggers 
 
\t \t $(".popup").unbind(); 
 
\t \t 
 
\t \t // Popup Window 
 
\t \t \t 
 
}); 
 

 

 
    \t

<%@ page language="java" contentType="text/html; charset=UTF-8" 
 
    pageEncoding="UTF-8"%> 
 
<%@page import="java.util.*"%> 
 
<%@ page import="java.text.SimpleDateFormat" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
<style> 
 
</style> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
$("body").live("click", "#tab_logic.del", function() { 
 
\t alert("i am"); 
 
}); 
 
</script> 
 
<!-- dynamic value will be loaded in pop-up.js --> 
 
<script src="http://code.jquery.com/jquery-1.10.2.js" 
 
\t type="text/javascript"></script> 
 
<script src="js/popup.js" type="text/javascript"></script> 
 
</head> 
 
<body> 
 
<form> 
 
<!parent table elements --> 
 
<div class="popup"> 
 
<table cellspacing="0" cellpadding="0" width="100%" id="tab_logic" > 
 
<tr> 
 
\t <th align="center">Parameters</th> 
 
\t <th align="center">Specification</th> 
 
\t <th align="center">Actual1</th> 
 
\t <th align="center">Actual2</th> 
 
\t <th align="center">Actual3</th> 
 
\t <th align="center">Actual4</th> 
 
\t <th align="center">Actual5</th> 
 
\t <th align="center">Remove</th> 
 
</tr> 
 
</table> 
 
</div> 
 
</body> 
 
</html>

Answer 1

Ihre click Handler funktionieren sollte, sofern:

• Sie bereits jquery enthalten sind, wenn der Handler mit jque erstellt wird
ry
• body bereits vorhanden ist, wenn der Handler
• der else um den Code eingewickelt wird erstellt Sie haben es tatsächlich läuft, nicht einen ähnlichen Code (aber ohne die Event-Handler) in der if
• der Javascript-Code ist nicht Absturz vor der Handler

EDIT erstellt wird:

Basierend auf der Bearbeitungs getan kurz vor dem Zeitpunkt dieser bearbeiten

, haben wir dieses Skript:

<script type="text/javascript"> 
$("body").live("click", "#tab_logic.del", function() { 
    alert("i am"); 
}); 
</script> 

Das Hauptproblem besteht darin, dass der Selektor sucht nach Tags, um die id von tab_logic und die Klasse der del zugleich jedoch mit, dies entspricht nicht das Strukturmuster von tab_logic mit Nachkommen Tags mit den del Klasse. Wir brauchen einen Platz dort. Außerdem ist live veraltet und wird nicht funktionieren, wenn Sie jquery auf Version 3 aktualisieren, stattdessen wird on empfohlen. Schließlich würde es nicht schaden, einen $(function() {}) um den Dreiliner oben zu wickeln.

Vorschlag:

<script type="text/javascript"> 
$(function() { 
    $("body").on("click", "#tab_logic .del", function() { 
     alert("i am"); 
    }); 
} 
</script> 

Answer 2

Anstatt das Click-Ereignis bindendes Dokument zur Vervollständigung die spezifischen Klasse oder id als Selektoren verwendet wie von id-Wert auf Ihre Popup-Klasse in div Hinzufügen (unter der Annahme, Popup-Klasse an mehreren Stellen verwendet wird, und wir wollen nicht, Ereignis für alle von ihnen hinzufügen)

wie:

<div class="popup" id="newid"> 

jetzt den Ereignis-Listener hinzufügen, wie:

$("#newid").on("click", "#tab_logic.del", function() { 
    alert("i am"); 
}); 

Wenn Sie jetzt auf das Bild klicken, das Sie hinzufügen möchten, wird eine Warnung generiert.