Question

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

您可以提供的任何建议，以使下面的代码工作将是伟大的。我将在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>

Answer 1

替换它：

$(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。如果这不是您所期望的，那么请编辑您的问题，并提供有关您希望如何工作的更多详细信息。

Answer 2

$('#output').prepend('<img height="1" width="1" src="http://view.atdmt.com/action/AAA_ImageTest"/>');

Answer 3

$(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');     
    });
});

我没有创建HTML并添加为HTML，而是即时创建img，添加它的CSS并附加到#output。

e.preventDefault它只是用于阻止项目的默认行为。如果有一天你从<div id="button">Test</div>更改为实际的锚<a id="button" href="#">Test</a>，这只是一个奖励。

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

Answer 4

如果你想追加纯jQuery方式：

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

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

我不能让我的Jquery工作：点击时需要动态添加img标签

4 个答案: