jquery中修改了元素的html后无法触发事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery中修改了元素的html后无法触发事件相关的知识，希望对你有一定的参考价值。
你好，我有这样一个dl元素布局，
<dl>
<dd>1</dd>
<dd>2</dd>
<dt><a href="javascript:;"></a></dt>
</dl>
当我点击dt中的a时触发一个ajax事件加载内容变成这样
<dl>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
<dd>4</dd>
<dt><a href="javascript:;"></a></dt>
</dl>
也就是多了两dd列表元素，，，但是修改了dl的html后，，，，第二次再点击dt中的a时，，，就没有任何响应了，请问是什么原因倒置的。。。。
你的这个分两种情况
1、你的新数据是累加在旧数据上的
2、你的新数据要覆盖原来的数据
两种类型都给你写一下吧，解决如下：
<!DOCTYPE HTML><html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- 点击累加数据的时候，原来的 1 和 2 等都不删除 -->
<dl id="dl1">
<dd>1</dd>
<dd>2</dd>
<dt><a href="javascript:">累加数据</a></dt>
</dl>
<!-- 点击覆盖的时候，原来的所有数据要删除 -->
<dl id="dl2">
<dd>1</dd>
<dd>2</dd>
<dt><a href="javascript:">新数据覆盖旧数据</a></dt>
</dl>
</body>
</html><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var i = 2;
// 绑定两个点击方法
$("#dl1 a").click(function()
AjaxGetData1();
);
$("#dl2 a").click(function()
AjaxGetData2();
);
// 模拟 ajax 获取数据，这里我就随便写了一个，用循环生成的了
// 数据累加
function AjaxGetData1()
var data = "<dd>" + (i + 1) + "</dd><dd>" + (i + 2) + "</dd>";
i = i + 2;
// 直接把 ajax 获取的数据，加到 id="dl1" 下的 dt 之前（before）
$("#dl1 dt:eq(0)").before($(data));
;
// 数据覆盖
function AjaxGetData2()
var data = "<dd>" + (i + 1) + "</dd><dd>" + (i + 2) + "</dd>";
i = i + 2;
// 先删除 id="dl2" 下的所有 dd，然后再把新获取的 data 加到 id="dl2" 的 dt 之前
$("#dl2 dd").remove();
$("#dl2 dt:eq(0)").before($(data));
;
</script> 参考技术A 啊，我总算明白题主意思了：
那是因为你的<a>标签的位置（或者是本身<a>改变了），
从字符串来看，<a>标签依旧是<a href="javascript:;"></a>，
但从DOM来看，实际上绑定点击事件的那个<a>已经改变了。
于是只需要在 ajax 执行完成之后，重新给 <a> 绑定点击事件就可以解决。 参考技术B 在$(function())里面 a元素用live来绑定
$("a").live("click",function()
//写你的单击事件代码
);
至于原因，你在手册中看了这个live就知道了追问
谢谢，我用的版本已经没有live这个函数了
参考技术C 你是如何修改,直接用html()替换?还是用append插入?
如果想替换html后还能触发事件..可以尝试用live绑定事件追问
谢谢，我用的版本已经没有live这个函数了
jQuery事件：scroll事件
scroll事件：滚动元素时或者是使用scroll()方法会触发scroll事件
scroll()方法
触发选中元素的scroll事件
$(selector).scroll()//无参数
规定scroll事件被触发后的函数
$(selector).scroll( function )
function:js Function对象
以上是关于jquery中修改了元素的html后无法触发事件的主要内容，如果未能解决你的问题，请参考以下文章
解决jQuery ajax动态新增样式无法触发点击事件的问题