什么地方错了

一天要饭生活又开始啦 2013-09-03 03:05:55 
<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>
...全文
201 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
阿鱼 2013-09-12
  • 打赏
  • 举报
 回复
引用 7 楼 veryhunger 的回复:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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事件没有被触发，所以函数就不执行了。
一天要饭生活又开始啦 2013-09-12
  • 打赏
  • 举报
 回复
引用 8 楼 qwklove 的回复:
[quote=引用 7 楼 veryhunger 的回复:] 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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事件没有被触发，所以函数就不执行了。[/quote] 非常感谢
一天要饭生活又开始啦 2013-09-11
  • 打赏
  • 举报
 回复 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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为什么不添加？
KK3K2005 2013-09-03
  • 打赏
  • 举报
 回复
$('dl dd').click(function() { $(this).parent().html("<input type='text' /> <select><option value='Work'>Work</option></select> <span class='close'>x</span>"); clone = $(this).clone(true); });
阿鱼 2013-09-03
  • 打赏
  • 举报
 回复
引用 3 楼 veryhunger 的回复:
[quote=引用 2 楼 qwklove 的回复:]
jquery是哪个版本？
1.7以上，live方法就被on替代了。

.class是哪个~~
单击input不取消冒泡，dd的单击事件也是会一直触发的~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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>
版本是最新的，就是运行了，点击了文字，出现文本框，点击文本框不能输入文字[/quote]

首先，用live方法肯定是会报错的，控制台显示如下：


其次，你点击dd出现文本框后，你再点击文本框，这时dd的事件又被触发（又一次重新在dd内填充字符串“<input type='text'/><select>....”）。你每点一次文本框，dd就重新填充一次，所以就影响了文本的正常输入。
一天要饭生活又开始啦 2013-09-03
  • 打赏
  • 举报
 回复
引用 1 楼 KongHuLu 的回复:
jquery版本是多少？ 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不报错的。
最新的，文本框不能点击啊
一天要饭生活又开始啦 2013-09-03
  • 打赏
  • 举报
 回复
引用 2 楼 qwklove 的回复:
jquery是哪个版本？ 1.7以上，live方法就被on替代了。 .class是哪个~~ 单击input不取消冒泡，dd的单击事件也是会一直触发的~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
版本是最新的，就是运行了，点击了文字，出现文本框，点击文本框不能输入文字
阿鱼 2013-09-03
  • 打赏
  • 举报
 回复
jquery是哪个版本？ 1.7以上，live方法就被on替代了。 .class是哪个~~ 单击input不取消冒泡，dd的单击事件也是会一直触发的~~
潮起潮落 2013-09-03
  • 打赏
  • 举报
 回复
jquery版本是多少？ 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不报错的。
测试人员掌握基本Linux命令——查看日志（实时日志）
发现bug，不能更加的准确去定位bug，在这样的情况下就可以打开Linux服务器，敲命令查看操作进行中的实时日志，当系统报错时，可以截图日志在缺陷管理系统中，开发人员就知道什么地方错了，操作步骤一定要写明确。...
Could not find class 'android.graphics.drawable.RippleDrawable', referenced from method android.supp
AS使用自定义控件时候，报错：Could not find class 'android.graphics.drawable.RippleDrawable', referenced from method android.support.v7.widget....折磨了自己半天，也没明白到底是什么地方错了
生产线上怎么做“防错”？不妨看看这个“防错”技术案例！
读后感：产线上防错是一种应用情况，其实我们在平时的工作和生活中一样需要。人不能杜绝犯错，那就预防犯错。 正文如下： 今天和大家聊一聊“防错”。在三年多前，师父第一次把我独立地扔到一条座椅装配的生产线...
【TCP/IP】【调试】丢包、流不通、错包等问题查证手段系列之一——日志方式
在进行TCP/IP相关的开发过程中，经常需要查证丢包、错包、流不通等问题。由于TCP/IP转发面涉及软件和硬件、并且软件流程上函数多、分支多，无论是增加打印或是分析流程，都比较困难。 本系列文章会将常用的定位手段...
R3.4.0安装包时报错“需要TRUE/FALSE值的地方不可以用缺少值”，需升级到R3.5.0
错误： 解决方案： 升级R3.5.0后，解决： 转载于:https://www.cnblogs.com/xianhan/p/9277621.html
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章