<style type='text/css'>
dl dt { width:100px; float:left; }
dl dd { margin-left:200px; }
</style>
<script type='text/javascript'>
var clone;
$(function() {
$('dl dd').click(function() {
$(this).html("<input type='text' /> <select><option value='Work'>Work</option></select> <span class='close'>x</span>");
clone = $(this).clone(true);
});
$('.class').live('click', function() {
$(this).parent().html('Add a phone number');
});
$('dl dd input').keydown(function() {
$('this').parent().append("<br /><span class='another'>Add another</span>");
});
$('.another').live('click', function() {
$(this).parent().parent().append(clone);
});
});
</script>
<dl>
<dt>Phone</dt>
<dd>Add a phone number</dd>
</dl>
dl dt { width:100px; float:left; }
dl dd { margin-left:200px; }
</style>
<script type='text/javascript'>
var clone;
$(function() {
$('dl dd').click(function() {
$(this).html("<input type='text' /> <select><option value='Work'>Work</option></select> <span class='close'>x</span>");
clone = $(this).clone(true);
});
$('.class').live('click', function() {
$(this).parent().html('Add a phone number');
});
$('dl dd input').keydown(function() {
$('this').parent().append("<br /><span class='another'>Add another</span>");
});
$('.another').live('click', function() {
$(this).parent().parent().append(clone);
});
});
</script>
<dl>
<dt>Phone</dt>
<dd>Add a phone number</dd>
</dl>
解决方案 »
- 关于 鼠标经过时出现下拉菜单,移走后菜单消失 的问题SOS
- 请教在HTML文件里如何获得PHP生成一个图像的验证码
- 单选项卡和多选项卡浏览器关闭事件监控问题
- 几行css代码,为何在ie中,margin在border之内,可以其他几个浏览器,margin都在border之外呢?(有代码)
- javascript的replace的怪问题
- 想询问一个有关SESSION的问题?
- 求一正则表达式
- 在jsp中或javascript中有没有一个方法把弹出的新窗口总显示在最上面?在线等!
- 制作网上同学录时遇到的问题!
- 写了一段脚本程序,运行时出现错误,大家帮忙看一下!
- 哪儿有错啊
- jquery checkbox 赋值问题
1.10似乎没有live这个方法了参考:
:http://api.jquery.com/live/
http://www.west-wind.com/weblog/posts/2013/Jun/12/Replacing-jQuerylive-with-jQueryon我换了1.7.1不报错的。
1.7以上,live方法就被on替代了。.class是哪个~~
单击input不取消冒泡,dd的单击事件也是会一直触发的~~
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
dl dt { width:100px; float:left; }
dl dd { margin-left:200px; }
</style>
<script type='text/javascript' src='http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript'>
var clone;
$(function() {
$('dl dd').click(function() {
$(this).html("<input type='text' /> <select><option value='Work'>Work</option></select> <span class='close'>x</span>");
clone = $(this).clone(true);
});
$('.class').live('click', function() {
$(this).parent().html('Add a phone number');
});
$('dl dd input').keydown(function() {
$('this').parent().append("<br /><span class='another'>Add another</span>");
});
$('.another').live('click', function() {
$(this).parent().parent().append(clone);
});
});
</script>
</head><body>
<dl>
<dt>Phone</dt>
<dd>Add a phone number</dd>
</dl>
</body>
</html>版本是最新的,就是运行了,点击了文字,出现文本框,点击文本框不能输入文字
首先,用live方法肯定是会报错的,控制台显示如下:
其次,你点击dd出现文本框后,你再点击文本框,这时dd的事件又被触发(又一次重新在dd内填充字符串“<input type='text'/><select>....”)。你每点一次文本框,dd就重新填充一次,所以就影响了文本的正常输入。
$(this).parent().html("<input type='text' /> <select><option value='Work'>Work</option></select> <span class='close'>x</span>");
clone = $(this).clone(true);
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
dl dt { width:100px; float:left; }
dl dd { margin-left:200px; }
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript'>
var clone;
$(function() {
$('dl dd').click(function() {
$(this).html("<input type='text' /> <select><option value='Work'>Work</option></select> <span class='close'>x</span><br /><span class='another'>Add another</span>");
clone = $(this).clone(true);
});
/*$('.close').live('click', function() {
$(this).parent().html('Add a phone number');
});*/
$('dl dd').delegate('.close', 'click', function(e) {
//$(this).parent().html('Add a phone number');
e.stopPropagation();
$(this).parent().html('Add a phone number');
});
/*$('dl dd input').keydown(function() {
$('this').parent().append("<br /><span class='another'>Add another</span>");
});*/
$('dl dd').delegate('input', 'click', function(e) {
e.stopPropagation();
});
/*$('.another').live('click', function() {
$(this).parent().parent().append(clone);
});*/
$('dl').delegate('.another', 'click', function(e) {
e.stopPropagation();
$(this).parent().parent().append(clone);
});});
</script>
</head>
<body>
<dl>
<dt>Phone</dt>
<dd class='dd'>Add a phone number</dd>
</dl>
</body>
</html>
点击another为什么不添加?
下次再提问,记得先引用别人的回复哦~(1)首先要弄清楚delegate的绑定机制,用你的代码解释一下:
$('dl').delegate('.another', 'click', function(e) {...})
这一行代码并不是把click事件绑定在了.another上,实际上仍然是绑定到了dl上。
当dl的click事件被直接触发或冒泡触发(也就是说当你点击dl或者dl的后代元素),同时满足一个条件:你点击的那个元素必须是.another,这时才会执行dl上绑定的click事件函数。(2)按照上述原理,正常的流程应该为:
1.你点击.another;
2..another的click开始冒泡-->dd-->dl,当冒泡到dl的时候,此时因为你一开始点击的是.another(匹配delegate绑定时的选择器“.another”),所以你用delegate对dl绑定的click事件函数就被触发了。
3..another的click继续冒泡-->body-->document-->window(3)你的代码问题就出在上面的第二步,当冒泡到dd的时候,因为你在$('dl dd').delegate('.close', 'click', function(e) {
//$(this).parent().html('Add a phone number');
e.stopPropagation();
$(this).parent().html('Add a phone number');
});
/*$('dl dd input').keydown(function() {
$('this').parent().append("<br /><span class='another'>Add another</span>");
});*/
$('dl dd').delegate('input', 'click', function(e) {
e.stopPropagation();
});这几行代码中取消了往dl的冒泡,所以click就无法冒泡到dl,这样虽然你点击的是.another,但是dl的click事件没有被触发,所以函数就不执行了。
$('dl').delegate('.another', 'click', function(e) {...})
这一行代码并不是把click事件绑定在了.another上,实际上仍然是绑定到了dl上。
当dl的click事件被直接触发或冒泡触发(也就是说当你点击dl或者dl的后代元素),同时满足一个条件:你点击的那个元素必须是.another,这时才会执行dl上绑定的click事件函数。(2)按照上述原理,正常的流程应该为:
1.你点击.another;
2..another的click开始冒泡-->dd-->dl,当冒泡到dl的时候,此时因为你一开始点击的是.another(匹配delegate绑定时的选择器“.another”),所以你用delegate对dl绑定的click事件函数就被触发了。
3..another的click继续冒泡-->body-->document-->window(3)你的代码问题就出在上面的第二步,当冒泡到dd的时候,因为你在$('dl dd').delegate('.close', 'click', function(e) {
//$(this).parent().html('Add a phone number');
e.stopPropagation();
$(this).parent().html('Add a phone number');
});
/*$('dl dd input').keydown(function() {
$('this').parent().append("<br /><span class='another'>Add another</span>");
});*/
$('dl dd').delegate('input', 'click', function(e) {
e.stopPropagation();
});这几行代码中取消了往dl的冒泡,所以click就无法冒泡到dl,这样虽然你点击的是.another,但是dl的click事件没有被触发,所以函数就不执行了。
非常感谢