2 zhanghaor zhanghaor 于 2016.09.25 13:25 提问

jQuery 用html方法修改元素内容后,重新选中元素data原本藏值无法找到

创建元素时,用data方法藏值

                            var book = books[i];
                            var li_str = getNoteBookLiStr(book.cn_notebook_name);
                            var $li = $(li_str);
                            //将bookId藏在li中
                            $li.data("bookId",book.cn_notebook_id);
                            $("#book_list").append($li);

用html方法修改元素内容

                            var li_str = '<li class="online"><a>'+
                                    '<i class="fa fa-book" title="online" rel="tooltip-bottom">'+
                                    '</i>'+newName+'</a></li>';
                            $checked_li.html(li_str)

重新选中后再调用data发现藏值找不到了undefined

            var noteBookId = $("#book_list li a.checked").parent().data("bookId");

2个回答

showbo
showbo   Ds   Rxr 2016.09.25 17:16
已采纳

没看到你第一段和第二段什么关系。。如使用html更新容器元素会导致你原来的li元素被移除dom元素,你再获取新元素肯定没有data换成的内容了。

zhanghaor
zhanghaor 我也发现我的问题,html应该是更新li元素下的内容,不应该再包含<li>标签,导致再次用选择器选择时选中的是新添加的li元素,所以原来的内容就找不到了。多谢!
接近 2 年之前 回复
wojiushiwo945you
wojiushiwo945you   Ds   Rxr 2016.09.25 14:58

那你在浏览器的开发者模式下,看下页面元素信息是不是真的不存在呢?可能是你的js语法错误。

zhanghaor
zhanghaor 回复毕小宝: 页面可以显示出元素发生变化,直接调用上次选择器选中元素的data也能访问到数据,但是如果用选择器重新选择一次,就发现原有的data变成了undefined
接近 2 年之前 回复
wojiushiwo945you
wojiushiwo945you 回复张浩BIT: 那你修改之后,页面的DOM资源管理器显示的真实元素情况是什么样的呢?
接近 2 年之前 回复
zhanghaor
zhanghaor 我在浏览器的console上用js进行同样的操作(data绑定数据,html修改元素,重新选中元素,调用data查找绑定数据)发现返回的也是undefined,如果不修改元素是可以data找到绑定数据的
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
jQuery中的data方法只能获取不能设置值?
data([key],[value]) 在元素上存放或读取数据,返回jQuery对象 上面是在jQuery手册中的截取,“存放”数据?先看代码<div id="div1" data-test="test">1</div> <script> console.log($("#div1").data("test"));//test </script>OK,读取是正常的。 再来,<div id
jQuery .html()用为读取和修改元素的HTML标签 对应js中的innerHTML[通过ID获取元素]
node2:/var/www/html/jquery/aa#cat a7.html 测试页面 node2:/var/www/html/jquery/aa#cat a7.js var name=document.getElementById('ID').innerHTML; console.log(name); 使用jQuery 语法: .html()用为读取和修改元素的HTM
jquery之设置元素内容(替换HTML或文本内容,使用html()和text()方法)
jquery之设置元素内容(替换HTML或文本内容,使用html()和text()方法)
js/jquery获取不到页面元素 需要点击一下才能找到
2018-03-23 更新 更新内容:检查在获取的时候是不是使用class获取元素,如果是则修改为通过id获取元素。通过id获取元素是可以直接获取到的 以下为原文 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 在项目中,尤其是后台管理常用到iframe嵌套,但是最近遇到一个问题。 我在页面上想要去获取页面的一个元素,却无法获取到元素 但是使用...
jquery动态改变元素内容
速记jquery        jquery是前端的开发利器,最近在使用的过程中遇到一些小小的问题,那就是想要获取某个标签的值,采取va()方法就是获取不到,后来经过资料的查找才发现原来是val()方法只是针对表单和输入框的,我晕。获得内容 - text()、html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法: ● text() - 设置或返回所选元素的文本内
jquery 使用each 遍历标签元素,修改标签内容
function choose_customer(){ $('[nctype="btn_add_customer"]').each(function(index){ if(!$(this).attr('data-customer_id')){ $('[sort='+index+']').removeClass('ncsc-btn-green'); //alert($(thi
jQuery设置和修改HTML
1.DOM操作 获得内容 text()–设置或返回所选元素的文本内容 html()–设置或返回所选内容的内容 val()–设置或返回表单字段的值$(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").clic
jQuery HTML节点元素修改、追加的方法
jQuery对于网页元素的操作。相信大家都不陌生html()方法。总结一下 html()、append()、prepend()、after()、before()  分别对网页节点的操作吧。   先拟定一场景 [php] view plaincopy start  123  end   html() 操作节点中的内容,一般我们可以用来快速给一个容器中赋值。 $("p").html(
【jQuery】使用appendTo()方法向被选元素内插入内容
appendTo()方法也可以向指定的元素内插入内容,它的使用格式是: $(content).appendTo(selector) 参数content表示需要插入的内容,参数selector表示被选的元素,即把content内容插入selector元素内,默认是在尾部。 例如,使用appendTo()方法,将外的元素插入内,如下图所示: 在浏览器中显示的效果:
Jquery处理未来元素
今天在工作中遇到一个问题:就是页面追加新增的HTML不受jquery影响。 比如某个class的变化事件: $(function() { $(".addStockBtn").click(function() { alert('hello world'); }); }); 当页面初始就有该class的元素是可以的,可以打印出hello word,但未来元素却不受影响。 比如,现在通过