jQuery图像加载已取消

Question

我正在使用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

有什么我可以解决的问题吗？

Answer 1

当您追加包含图像的行时，引号和双引号（“和”）的开头和结尾存在问题。

我将尝试再次编写：

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>

我不知道您这边有什么不同。 如果需要，请尝试这段代码，如果可行，请将其与您的代码进行比较。