Question

我有一个以下代码来访问我动态添加的图像以删除该行。但是我没有得到任何alert。添加了html结构。请检查。

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

<%@ 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() { 
	alert("i am"); 
});
</script>
<!-- dynamic value will be loaded in pop-up.js -->
<script src="http://code.jquery.com/jquery-1.10.2.js"
	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>
	<th align="center">Parameters</th>
	<th align="center">Specification</th>
	<th align="center">Actual1</th>
	<th align="center">Actual2</th>
	<th align="center">Actual3</th>
	<th align="center">Actual4</th>
	<th align="center">Actual5</th>
	<th align="center">Remove</th>
</tr>
</table>
</div>
</body>
</html>

Answer 1

您的click处理程序应该可以使用，前提是：

当使用jquery
body已存在
else缠绕在那里实际运行的代码，而不是if
在创建处理程序之前，Javascript代码没有崩溃

编辑：

根据编辑之前完成的编辑，我们有这个脚本：

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

主要问题是选择器正在查找同时具有id tab_logic和del类的标签，但是，这不符合结构具有tab_logic类的后代标记的del模式。我们需要一个空间。此外，不建议使用live，并且在将jquery升级到版本3时不起作用，建议使用on。最后，将$(function() {})包裹在上面的三个班轮周围也不会有什么坏处。

建议：

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

Answer 2

不是将click事件绑定到完整文档，而是使用特定的类或id作为选择器，例如将id值添加到div中的popup类（假设弹出类在多个地方使用，我们不想添加事件给所有人）

喜欢：

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

现在将事件监听器添加为：

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

现在，如果您点击添加的图像，它会生成警报。

无法将事件绑定到动态添加的图像元素

2 个答案: