0

对于下面的代码，当您单击按钮时，我试图让 img 标记加载到页面上的某个位置。这只是为了测试目的，但我需要让它工作。img 标签是一个 1 x 1 的像素，应该跟踪点击的内容。我知道 a 标签更适合此目的，但由于我无法在此解释的原因，不能使用此标签。

您可以提供任何使以下代码正常工作的建议都会很棒。我将在 Fiddler 中进行测试以确认。

如果您需要更多信息或澄清，请告诉我。

我感谢您的帮助！

谢谢，

<html>

<style type="text/css">

#button {
    display: inline-block;
    height: 20px;
    width: 150px;
    background-color:orange;
    font-family:cursive, arial;
    font-weight:bold;
    color: brown;
    border-radius:5px;
    text-align:center;
    margin-top:2px;
}

#output {
    font-family:garamond;
    color:black;
    height:450px;
    width:320px;
    border-radius:2px;
    border-color:black;
    background-color:white;
    overflow: auto;
    float: left;
}

</style>

<script type="text/javascript">

$(document).ready(function() {
 $('#button').click(function(){
  document.getElementById('output').innerHTML +=('<img height="1" width="1" src="http://view.atdmt.com/action/AAA_ImageTest"/>');
 });
});

</script>

<body>

<div id="button">Test</div>
<div id="output"></div>

</body>
</html>
4

4 回答 4

0

替换这个：

$(document).ready(function() {
 $('#button').click(function(){
  document.getElementById('output').innerHTML +=('<img height="1" width="1" src="http://view.atdmt.com/action/AAA_ImageTest"/>');
 });
});

有了这个：

$(document).ready(function() {
    $('#button').click(function(){
        $('#output').append('<img height="1" width="1" src="http://view.atdmt.com/action/AAA_ImageTest"/>');
    });
});

每次单击时，使用.append("<img..)都会添加另一个。img如果这不是您所期望的，请使用有关您希望它如何工作的更多详细信息来编辑您的问题。

于 2013-07-29T21:41:37.860 回答
0 
$('#output').prepend('<img height="1" width="1" src="http://view.atdmt.com/action/AAA_ImageTest"/>');
于 2013-07-29T21:47:10.917 回答
0 
$(function() {
    $('#button').on('click',function(e) { //.on() preferred, click() is a short-hand for this
        e.preventDefault(); //if you change from div to `A` someday

        var timestamp = Math.round(new Date().getTime() / 1000);

        //creating IMG on-the-fly, adding css and appending it
        $('<img />', {
            'src': 'http://view.atdmt.com/action/AAA_ImageTest?ts='+timestamp
        }).css({
            'width':'1px',
            'height':'1px', 
            'border':0
        }).appendTo('#output');     
    });
});

我没有在 had 上创建 HTML 并将其添加为 HTML，而是在运行中创建img，添加它的 CSS 并附加到#output.

e.preventDefault它只是为了阻止项目的默认行为。<div id="button">Test</div>如果有一天你变成了一个真正的主播，那只是一个奖励<a id="button" href="#">Test</a>。

更新：@Kamui 为了防止图像缓存（因此在添加另一个时不会进行第二次调用），我在图像 URL 上添加了一个时间戳。

于 2013-07-29T21:47:21.277 回答
-1

如果要附加纯 jQuery 方式：

jQuery("#output").append(
    jQuery("<img>")
        .attr("height", "1")
        .attr("width", "1")
        .attr("src", "http://view.atdmt.com/action/AAA_ImageTest")
);

这将在 jQuery 世界中创建一个img对象，然后将其附加到您的输出 div。这种方法（而不是写一个大的长字符串）很好，因为它可以保持一切干净 - 不用担心转义引号，并且很容易在其中为某些属性添加动态值。

于 2013-07-29T21:44:17.113 回答