Javascript 我能'；我的Jquery无法工作：需要在单击时动态添加img标记_Javascript_Jquery

Javascript 我能'；我的Jquery无法工作：需要在单击时动态添加img标记

javascript jquery

Javascript 我能'；我的Jquery无法工作：需要在单击时动态添加img标记,javascript,jquery,Javascript,Jquery,对于下面的代码，我试图在您单击按钮时在页面的某个位置加载一个img标记。这只是为了测试，但我需要让它工作。img标签是一个1乘1像素，用来跟踪点击的内容。我知道a标签更适合这个用途，但由于我无法在此解释的原因，不能使用它您可以提供任何建议，使下面的代码工作将是伟大的。我将测试小提琴来确认如果您需要更多信息或澄清，请让我知道我感谢你的帮助谢谢 <html> <style type="text/css"> #button { display: inline

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

您可以提供任何建议，使下面的代码工作将是伟大的。我将测试小提琴来确认

如果您需要更多信息或澄清，请让我知道

我感谢你的帮助

谢谢

<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>


#钮扣{
显示：内联块；
高度：20px；
宽度：150px；
背景颜色：橙色；
字体系列：草书，arial；
字体大小：粗体；
颜色：棕色；
边界半径：5px；
文本对齐：居中；
边缘顶部：2倍；
}
#输出{
字体系列：garamond；
颜色：黑色；
高度：450px；
宽度：320px；
边界半径：2px；
边框颜色：黑色；
背景色：白色；
溢出：自动；
浮动：左；
}
$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
document.getElementById（'output'）.innerHTML+=（''）；
});
});
试验

替换此：

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

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
document.getElementById（'output'）.innerHTML+=（''）；
});
});

为此：

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

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（'#output'）。追加（''）；
});
});

使用

.append（如果您想以纯jQuery方式追加，请执行以下操作：
jQuery("#output").append(
    jQuery("<img>")
        .attr("height", "1")
        .attr("width", "1")
        .attr("src", "http://view.atdmt.com/action/AAA_ImageTest")
);

jQuery（“输出”）.append(
jQuery（“
这将在jQuery世界中创建一个img
对象，然后将其附加到输出div中。这种方法（与编写一个大的长字符串相反）很好，因为它保持了所有内容的干净性—不必担心转义引号，并且很容易在其中为某些属性添加动态值。
$（“#output”）.prepend（“”）；
$('#output').prepend('<img height="1" width="1" src="http://view.atdmt.com/action/AAA_ImageTest"/>');

$（函数（）{
$（“#按钮”）。在（'click'，函数（e）{/.on（）首选，click（）是这方面的缩写
e、 preventDefault（）；//如果有一天从div更改为'A'
var timestamp=Math.round（new Date（）.getTime（）/1000）；
//动态创建IMG，添加css并附加它
$('
我不是在had上创建HTML并添加为HTML，而是动态创建img
，添加它的CSS并附加到#output

e.preventDefault
这只是为了阻止项目的默认行为。如果有一天你从Test
更改为实际的锚
，这只是一个额外的奖励
更新：
@Kamui为了防止图像缓存（因此在添加另一个图像缓存时不会进行第二次调用），我在图像URL上添加了一个时间戳。
如果使用jQuery，请使用它：$（“#输出”）.html（“”）
@Kamui我已经更新了我的答案，以便在请求相同的URL时绕过浏览器缓存。如果您再次单击，这将不会再添加另一个。我已经更新了答案，这样它就会添加。添加另一个相同的图像有什么意义？首先添加1x1图像有什么意义？这不是我们判断的地方。它应该跟踪每一次，但是ton被单击。当域被调用时，我们的服务器将跟踪加载的像素，因此按钮被单击。我们有一个更简单的方法来完成此操作，但出现了一个特定的场景，我目前正在测试以查看我们的选项。我猜图像将缓存在浏览器上，因此不会向服务器发出第二个请求。看在第一个请求/响应的HTTP头上，查找缓存控制、ETag、上次修改日期和其他相关头，看看是否是这样。如果您发现图像的响应头正在缓存，您应该能够调整它们。
不存在。img
是一个自关闭元素。@RaphaelDDL您是对-我一直看到它是这样写的，即使是像image
或input
这样的标记。jQuery是可以原谅的，并且确实正确地将标记插入DOM，但我真的应该正确地编写它。有一件事需要注意-在img
标记上，高度
和宽度
属性是与CSSheight
和width
属性不同。我忘记了所有细节，但这与图像加载前的容器大小有关。@JoeEnoswidth
和height
属性与CSS中的属性完全相同。不需要它们（通过使用attr（）创建更多代码）
例如，如果您可以在css（）中声明所有
。唯一的区别是属性只接受数字，数字将被转换为像素，而在CSS上你可以使用任何。我在一些地方读到，与挂起/失败的图像相关的一些差异。但我现在无法重现-CSS的行为似乎与内联属性相同。我发现没有w是描述意识形态差异的人（表现、功能、设计等）。看起来CSS总是赢，如果它们都被定义。值得注意的是，他们没有反对HTML5中的高度和宽度，所以这告诉我有人认为它仍然有意义。@JoeEnos是的，我读过w3c文档，确实没有反对HTML5，但找不到“为什么”。是的，内联CSS总是赢ainst属性。如果您使用Chrome开发工具进行检查，您将看到它们被css对应项覆盖。
$(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');     
    });
});