jquery怎样获取动态增加的img标签的id

Posted 2023-05-01

$("#timeplay").append("<img src='upload/headimg/"+element.headimg+"' id='"+element.timepoint+"' class='headimage' style='margin-left:"+blzhnum+"px;position:absolute;width=24px;height=24px;'/>");

这是动态增加的img标签，取值用
$("img.headimage").click(function()
var v = $(this).attr('id');
alert(v);
);

取值的代码没有错的。单写一个img标签就有。用ajax动态增加img时候就不行，源文件看不到增加的img标签，但是网页上已经能够显示了。求这个问题怎么解决

1、新建一个html文件，命名为test.html。

2、在test.html文件中，在p标签内，使用span标签创建一行文字，span标签是p标签的子标签。

3、在test.html文件内，设置span元素的id为myspan，下面将使用jquery方法获得该id值。

4、在test.html文件内，使用button标签创建一个按钮，按钮名称为“获取子标签的ID值”。

5、在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行getspanid函数。

6、在js标签中，创建getspanid()函数，在函数内，通过元素名称获得p元素对象，使用children（）方法获得p标签的子标签，再通过attr()方法来获得id值。最后，使用alert()方法将id值输出来。 

参考技术A

使用 on()方法，本质上使用了事件委派，将事件委派在父元素身上。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品，但是由于on()方法必须有事件，没有事件时可选择delegate()；

父元素： .main .left 

子元素：  li

$("父元素").on("click","子元素",function()

   var index=$(this).index();

   $(".main .right").find('li').css("background":"#F4F4F4","color":"#333");

   $(this).css("background":"#fff","color":"#46c6ff");

   $(".main .left").find('li').hide();

   $(".main .left").find('li').eq(index).show();

);

扩展资料

on()可以获取动态元素，必须有事件；

delegate() 可以获取动态元素，可以没事件；

live() 可以获取动态元素，jQuery 1.9已弃用，必须有事件；

bind() 只能获取静态元素，不能获取动态元素，必须有事件。

用jQuery的append()方法动态添加了一段html代码之后，发现在为新添加的元素绑定click事件时无法获取该新元素。

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

参考技术B 你是想在动态增加的img标签绑定事件是么？
如果是~使用live方法绑定事件就行了~
比如：
$("img.headimage").live("click", function()
var v = $(this).attr('id');
alert(v);
);
希望对您有帮助~
By Billskate本回答被提问者和网友采纳 参考技术C

1、动态增加img标签时将事件触发绑定在标签上（事先写好触发方法）

如：

//动态增加标签
$("body").append("<img src='' id='jsoaeig' onclick='imgclick(this);'/>");
//绑定的方法
function imgclick(obj)
    //获取标签id
    $(obj).attr("id");

2、动态增加标签之后遍历标签绑定事件

//增加标签
$("body").append("<img src='' id='jsoaeig' class='img'/>");
//遍历标签
$("body img").each(function(index,obj)
    alert($(this).attr("id"));
);

参考技术D 你的事件绑定是在动态添加之前，所以之后添加的img标签式没有绑定事件的，你应该在动态添加img标签后 再次对img标签进行事件绑定

如何使用 JQuery 创建一个新的 img 标签，其中包含来自 JavaScript 对象的 src 和 id？

【中文标题】如何使用 JQuery 创建一个新的 img 标签，其中包含来自 JavaScript 对象的 src 和 id？

【英文标题】：How to create a new img tag with JQuery, with the src and id from a JavaScript object?

【发布时间】：2011-12-22 06:19:07

【问题描述】：

我对 JQuery 有基本的了解，但绝对是新手，我怀疑这很容易。

我的图像 src 和 id 在 JSON 响应中（转换为对象），因此 responseObject.imgurl 和 responseObject.imgid 中有正确的值，现在我想用它创建一个图像将它附加到一个 div （让我们称之为<div id="imagediv">。我有点坚持动态构建<img src="dynamic" id="dynamic"> - 我见过的大多数示例都涉及替换现有图像上的 src，但我没有现有图像。

【参考方案1】：

您可以通过将属性传递给jQuery constructor 来完全避免.attr 来节省一些字节：

var img = $('<img />',
              id: 'Myid',
               src: 'MySrc.gif', 
               width: 300
             )
              .appendTo($('#YourDiv'));

【参考方案2】：

var img = $('<img />',  
  id: 'Myid',
  src: 'MySrc.gif',
  alt: 'MyAlt'
);
img.appendTo($('#YourDiv'));

【参考方案3】：

对于那些在 IE 8 中需要相同功能的人，这是我解决问题的方法：

  var myImage = $('<img/>');

               myImage.attr('width', 300);
               myImage.attr('height', 300);
               myImage.attr('class', "groupMediaPhoto");
               myImage.attr('src', photoUrl);

我无法强制 IE8 在构造函数中使用对象。

【参考方案4】：

在 jQuery 中，可以通过将 HTML 字符串传递给构造函数来创建新元素，如下所示：

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');

【讨论】：

@a7omiton 通过上下文菜单或检查器查看源代码？上下文菜单（或 Ctrl + U）显示从服务器接收到的数据，没有 JavaScript 所做的更改。使用 DOM 检查器查看文档的活动 HTML 以及实时更改。

抱歉，我删除了评论：/，它现在确实显示在开发工具中，由于 jquery map 404 问题，页面被挂起

你是对的，但是图片没有显示在源页面上（ctrl + u）

@a7omiton 您可以通过单击右下角的齿轮图标并禁用“启用源映射”选项来禁用有关 jquery.min.map 的 404 警告。

是的，我只是在看 paul_irish (***.com/questions/18365315/…) 的解决方案。谢谢你:)