我正在使用 Shadowbox 打开弹出窗口。弹出窗口的工作完成后，我在父页面上附加一行，然后按照代码中的方式关闭阴影框。
var row$ = $("<tr id='"+data.entityContactId+"'>");
row$.append("<td align='left' valign='top'>"+data.entityContactId+"</td>");
row$.append("<td align='left' valign='top'>"+data.fName+"</td>");
row$.append("<td align='left' valign='top'>"+data.mName+"</td>");
row$.append("<td align='left' valign='top'>"+data.lName+"</td>");
row$.append("<td align='left' valign='top'>"+data.functionalRole+"</td>");
row$.append("<td align='left' valign='top'>"+data.designation+"</td>");
row$.append("<td align='left' valign='top'>"+data.status+"</td>");
row$.append("<td align='left' valign='top'><a rel='shadowbox[]; width=1000; height=565;'
href='../contactDetails/contactDetails.html?entityContactId="+entityContactId+"&companyId="+entityId+"&companyCode="+entityCode+'>
<img src='http://26fc614be383109f4ed8-83b958a355d4ec1f6468075626f4c2ef.r23.cf1.rackcdn.com/edit.png' title='View Contact'/></a></td>");
...... more code for appending 2 more images...
window.parent.$("#"+rowID+"").replaceWith(row$);
window.parent.Shadowbox.setup();
window.parent.Shadowbox.close();
就功能而言，一切都完成得很好，在父页面的表格中附加了一行。但图像未附加在页面上。我更深入地研究了一下，发现请求被 jquery 或其他东西取消，如下面的文件所示。!
抱歉，由于声誉问题，无法发布图片。
但是我可以发布按 f12 后出现的 chrome 网络选项卡。
路径 --> 方法 --> 状态 --> 类型 --> 发起者
/edit.png--> 获取 --> (取消)待处理 --> jquery-1.10.js6569
我能做些什么来解决这个问题吗？
最佳答案
附加包含图像的行时，引号和双引号(' 和 ")的开始和结束出现问题。
我会尝试再写一次:
row$.append("<td align='left' valign='top'><a rel='shadowbox[]; width=1000; height=565;'
href='"../contactDetails/contactDetails.html?entityContactId="+entityContactId+"&companyId="+entityId+"&companyCode="+entityCode'>
<img src='http://26fc614be383109f4ed8-83b958a355d4ec1f6468075626f4c2ef.r23.cf1.rackcdn.com/edit.png' title='View Contact'/></a></td>");
如果还有其他类似的行，您也需要修改它们。
我所做的是:在“../contactDetails/cont...”之前添加了一个双引号 (")，并在“entityCode”之后删除了一个 +。
编辑
这与您的示例类似。我尝试过这个，效果很好。
<!DOCTYPE HTML>
<html>
<head>
<title>Show Image Dimensions Locally</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("document is ready");
var $row = $("<tr id='newrow'>");
$row.append("<td align='left' valign='top'><img src='http://eofdreams.com/data_images/dreams/image/image-03.jpg' title='Image' style='max-width: 400px; max-height:200px' /></td>");
$row.append("<td>New Text 1</td>");
$row.append("<td>New Text 2</td>");
$row.append("<td>New Text 3</td>");
$row.append('</tr>');
window.parent.$("#row").replaceWith($row);
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Image</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Columt 3</th>
</tr>
</thead>
<tbody>
<tr id="row">
<td>Image goes here</td>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
</tbody>
</table>
</body>
</html>
我不知道你这边有什么不同。 如果需要，请尝试这段代码，如果有效，请将其与您的代码进行比较。
关于javascript - Jquery 图像加载取消，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18866202/