个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我希望克隆一个元素的 innerhtml (#clone) 并将其插入另一个元素 (#newLocation)。
使用clone()的问题是，我将首先删除#newLocation中当前的元素(如果有)，然后迭代中的每个元素>#clone 并将其附加到 #newLocation。这不是世界末日，但我希望有一种更简单的方法。
相反，我想我应该使用 html()。由于这不会保留事件，因此我必须使用 ON 委托(delegate)事件。我原以为这会起作用，但事实并非如此。
有什么建议我做错了吗？另外，即使我可以使 html() 解决方案正常工作，您认为使用 clone() 解决方案会更有效吗？
编辑:刚刚编写了我的第一个插件:http://jsfiddle.net/Wnr65/这似乎有效。使用好主意吗？当然可以写得更好。
$(document).ready(function(){
$("#cloneIt").click(function(){$('#newLocation').cloneInnerHtml('clone').css('color', 'red');});
$("#clone a").click(function(){alert("click");});
$("#clone select").change(function(){alert("change");});
});
(function( $ ){
$.fn.cloneInnerHtml = function( id ) {
this.empty();
var $t=this;
$('#'+id).each(function() {$t.append($(this).clone(true));});
return this;
};
})( jQuery );
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Clone INNERHTML</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" language="javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#cloneIt").click(function(){$('#newLocation').html($('#clone').html());});
//Only works on original clone
$("#clone a").on("click", function(){alert("click");});
$("#clone select").on("change", function(){alert("change");});
//Doesn't work at all
$("#newLocation a").on("click", function(){alert("click");});
$("#newLocation select").on("change", function(){alert("change");});
});
</script>
</head>
<body>
<input type="button" value="Clone it" id="cloneIt" />
<p>Original clone is shown below</p>
<div id="clone">
<a href="#">Click Me</a>
<select><option>Hello</option><option>Goodby</option></select>
</div>
<hr />
<p>Insert new clones below.</p>
<div id="newLocation">
<p class="someOldElement">someOldElement</p>
</div>
</body>
</html>
最佳答案
您的代码没有按照您想要的方式使用react是正常的。当你这样做时
$("#clone a").on("click", function() {
alert("click");
});
它将把click事件绑定(bind)到与#clone a选择器匹配的元素。这些要素是在执行时确定的。在您的情况下，此行将事件绑定(bind)到页面中存在的第一个也是唯一的链接。
相同的规则适用于代码
$("#newLocation a").on("click", function() {
alert("click");
});
但这里的区别在于，在执行时，#newLocation内部没有a元素，所以选择的是空并且处理程序根本没有绑定(bind)。
然后，当你这样做时
$('#newLocation').html( $('#clone').html() );
它会从一个元素获取 HTML 内容并将其复制到另一个元素中，但这只是关于 HTML 内容，因此事件绑定(bind)仍然与“复制操作”之前相同。
on 方法有不同的语法，只有一种允许事件委托(delegate):
// get all current "a" elements inside the "#clone"
// and bind the click event
$( "#clone a" ).on( "click", handler );
// get the "#clone" element, bind a click event to it
// BUT trigger the event only when the origin of the event is an "a" element
// here the event delegation is enabled
// it means that future "a" elements will trigger the handler
$( "#clone" ).on( "click", "a", handler );
// if you want it to work with your code
// you could do something like below
// this add a click handler to all present and future "a" elements
// which are inside "#clone" or "#newLocation"
// but this is not the recommended way to do this, check below the clone method
$("#clone, #newLocation").on("click", "a", handler);
clone 方法不会删除元素，这是一个工作演示 http://jsfiddle.net/pomeh/G34SE/
HTML 代码
<div class="source">
<a href="#">Some link</a>
</div>
<div class="target">
</div>
CSS代码
div {
width: 100px;
height: 25px;
}
.source {
border: solid red 1px;
}
.target {
border: solid blue 1px;
}
Javascript代码
var $element = $("a"),
$target = $(".target"),
$clone;
$element.on("click", function( ev ) {
ev.preventDefault();
console.log("click");
});
$clone = $element.clone( true );
$clone.appendTo( $target );
该方法还接收一个参数，指示事件处理程序是否应与元素 http://api.jquery.com/clone/ 一起复制。
关于jquery - 复制 HTML 并保留事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10317552/
25
4
0
仅使用POSIX shell 的特性，是否有一个“简单命令”，它什么也不做，也不改变$? 的值。人们通常描述:作为 shell 的无操作命令，但这总是设置 $?为零，所以这不是我想要的。 这是生成 s
我需要保留当前的 GlBlendFunc 以便在我做一些工作后可以恢复它。似乎这不是可以用 GLPushAttrib 保存的属性之一，还有其他类似的方法可以用来保存状态吗？ 最佳答案 glGet与
我目前正致力于创建 Fuseki 三重存储浏览器的项目。我需要可视化 TripleStore 中的所有数据并使应用程序可浏览。唯一的问题是 QuerySolution 遗漏了三元组中的“”。 如果我使
我知道没有必要保留委托(delegate)，以避免保留循环。我在一次采访中碰巧遇到了一个问题，“如果保留了 appDelegate 会怎样？”。我对此没有答案，并根据我的知识在这里寻求答案。谢谢 最佳
我正在用 C 编写第一个更严肃的程序，但我陷入了困境。我需要将此列表排序为不同的单独文件，因此它看起来像这样: BE30B Berlin 2014-04-02 Gale 02 BE30B Berlin
我有 4 个页面，我使用 ajax 和 historyPopState 在它们之间进行更改。但是有一个问题，因为页面非常不同，它们使用不同的样式表和脚本。我可以一遍又一遍地下载它们，但我想问一下是否有
我有一个表单，其中包含从一个表创建的多行(与其他表没有关系)。当我保存表单时，我所做的每项更改都会保存，但数据库中确实有一个额外的空行。请参阅下文(希望)了解所有必要的信息。 PropertyAddi
我正在编写一个可以在 Canvas 上绘制气泡的应用程序。我有 MainActivity，它的布局是一个简单的 LinearLayout，我将其用作 fragment 的容器。当我在 Canvas 上
我想弄清楚为什么我通过这段代码得到 EXC_BAD_ACESS。我没有线索。谁能帮帮我。 - (void)loadJsonFile:(NSString*)fileName { NSError
我正在编写一个代码，它将遍历单词中的每个单词，在字典中查找它们，然后将字典值附加到计数器。但是，如果我打印计数器，我只会从我的 if 语句中获取最后一个数字(如果有的话)。如果我将 print cou
抱歉，标题有点困惑。 我想隐藏这些选择选项，只在用户选择按钮时显示。一旦用户选择了一个按钮，我希望选择字段将继续显示......但是如果用户选择了不同的按钮，我想从以前的选择中重置所选的选项并炫耀。
>>> t = "first%s\n" >>> t = t %("second") >>> print t firstsecond 无论如何我可以保留最后的“\n”并得到“firstsecond\n”
我试图弄清楚如何更改 if 语句中的变量并使其保持全局不变。 用户输入:!change Hi var A = "Hello" if (msg.content.includes ('!change'))
您好，我有一个关于在重新创建 Activity 时保留 fragment 的问题。我听说一种方法是在 onCreate 方法中使用 setRetainFragment(true) 。问题是——这与跟踪
我想知道是否有人可以帮助我解决下面代码中的内存管理问题。我对 rootController 特别感兴趣，它是在我执行 initWithRootViewController 时被保留还是在窗口 addS
我想确保我在这里正确理解了内存管理。是否有任何特殊原因在这里使用其中一种 assignCurrentDate 方法而不是另一种方法？此外，所有这些都不会导致内存泄漏，对吗？ 在 .h 中我们有: NS
我对 Angular2 删除尾部斜杠有疑问。我已经设置了我的 dotnet 核心应用程序来添加它们，但是一旦加载了 js，它们就会被删除。 在 Angular2 中甚至可能吗？ (我的客户需要它，所以
local_settings.py 反模式的原因之一是把 SECRET_KEY, AWS设置文件中的键等值有问题: secret 通常应该是这样的: secret !将它们保存在版本控制中意味着拥有存
import('./A'); import('./B'); import('./C'); export class Person {}; A、B 和 C 是纯 JS (es5) 库，它们使用全局 wi
df 是一个测试数据框，其中我只想保留 Hits 列中包含 | 字符的行和行其中包含 hits(即 Hit1、Hit2 等)以及 Hits 列中的空白单元格。 df 从开始 (^) 到结束 ($)
我是一名优秀的程序员,十分优秀！