- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在做这个项目,每当我单击加号时,我都必须克隆一个待办事项列表,它会克隆该待办事项列表。但是动态创建的待办事项列表不会监听任何事件,即使我使用了 .on 而不是 .click。请查看图像来理解我所说的内容。 The small plus sign in the left side corner is used to clone the entire todolist待办事项列表中较大的加号用于切换输入字段的可见性。当通过单击小加号创建新的待办事项列表时。新的动态创建的待办事项列表中的事件监听器不起作用。
// Check Off Specific Todos By Clicking
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
});
//Click on X to delete Todo
$("ul").on("click", "span", function(event){
$(this).parent().fadeOut(500,function(){
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event){
if(event.which === 13){
//grabbing new todo text from input
var todoText = $(this).val();
$(this).val("");
//create a new li and add to ul
$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>")
}
});
$(".fa-plus").on("click",function(){
$("input[type='text']").fadeToggle();
});
$("#test").on("click",function(){
$("#container").clone().insertAfter( $("#container") );
});
这是我的 html 代码
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
<link rel="stylesheet" type="text/css" href="assets/css/todos.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script type="text/javascript" src="assets/js/lib/jquery-2.1.4.min.js"></script>
</head>
<body>
<i class="fa fa-plus-square" id="test"></i>
<div id="container">
<h1>To-Do List <i class="fa fa-plus"></i></h1>
<input type="text" placeholder="Add New Todo">
<ul>
<li><span><i class="fa fa-trash"></i></span> Go To Potions Class</li>
<li><span><i class="fa fa-trash"></i></span> Buy New Robes</li>
<li><span><i class="fa fa-trash"></i></span> Visit Hagrid</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/todos.js"></script>
</body>
</html>
最佳答案
解决此问题的简单技巧是将 true
传递给 .clone()
方法:
$("#test").on("click",function(){
$("#container").clone(true).insertAfter($("#container"));
});
此 bool 值指示事件处理程序是否应与元素一起复制。默认值为false
。因此,当我们在不传递任何 bool 值的情况下调用 .clone() 方法时,它只是复制元素,而不是附加到它的事件处理程序。但是,当我们传递值 true
时,它会复制元素以及附加到其上的任何事件处理程序。
关于javascript - 如何使用 jquery 让事件监听动态创建的 html 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60775811/
我遇到了一个奇怪的问题,我以前从未真正体验过这个,这是服务器的代码(在这种情况下客户端是 firefox),我创建它的方式: _Socket = new Socket( AddressFamily.I
我正在使用 C 编程语言在 Ubuntu 中开发原始套接字程序。由于我使用原始套接字,因此需要使用 SOCK_RAW 类型而不是 SOCK_STREAM。使用 SOCK_RAW 反过来会通过抛出 来禁
我实际上在客户端-客户端应用程序方面遇到了麻烦。这个问题中的一切都与Unix网络编程环境有关。 这是我的情况: 我有一个客户端(从现在起称为 C1),它调用 listen()在套接字上。 C1 输入
是否可以监听 QTcpSocket?我在 Tcp 上有一个简单的 p2p 连接。但是我找不到在随机自由端口上启动 QTcpSocket 的方法。我应该为此使用 QTcpServer,还是仅对 1 个连
我正在尝试根据 this documentation 监听码头更改事件和 ACTION_DOCK_EVENT . 我的接收器从未被击中。 我的代码看起来很简单,所以我想知道监听停靠事件是否需要权限?我
在 Linux 3.9 内核和更高版本中运行,我有一个应用程序 X,它在特定套接字上监听连接。我想写一个不相关的应用程序 Y,它跟踪尝试连接到此套接字的次数、源 IP 等。 是否可以在 c++ 中(最
是否可以监听日志条目?即是否存在用于附加日志条目的广播 Intent ? 最佳答案 没有 Intent 。 使用下面的代码: try { Process mLogcatProc
我已经实现了 installTap 方法,它为我提供了音频缓冲区浮点示例。我已经通过我的 C++ DSP 库过滤了它们。我想将此缓冲区“发送”到耳机/扬声器。我从示例中再次执行了 AVAudioPCM
我正在尝试启动一个在后台运行的服务,该服务正在监听 ACTION_SCREEN_OFF,当它找到 ACTION_SCREEN_OFF 时,启动我的 Activity 。 我在某处读到您需要创建一个Br
我正在开发一个 HOC,以帮助处理我的 React 应用程序中的表单(用于练习)。 // components/Wrapper.js import React from 'react'; export
我有“服务器端”mqtt 客户端,用于监视和管理远程 mqtt 客户端。我想扩展此服务器模块以密切关注远程客户端的连接。 在正常操作期间,远程客户端定期 PING 代理,根据代理日志: 1532924
我正在编写一个检查电池容量的守护进程。这是用于运行 Linux 的太阳能嵌入式设备。我读过使用 sleep() 是个坏主意在守护进程中,因此我正在尝试使用事件。所以我写了一些 PoC,但我没有收到任何
是否有一个库或技术来监听 Swing ui 对象上的所有可变事件?具体数据。 例如,我有一个带有 JTextArea、JCheckBox、JComboBox 等的 JPanel。有没有一种通用的方法可
使用 KineticJS,是否可以仅绑定(bind)函数一次?就像 jQuery 的等价物一样......例如。在 jQuery 中 // bad $('.wrap a').on('click', m
我正在使用 jquery 制作一个非常简单的富文本编辑器...我不想使用第三方的。 我需要监听 iframe(同一域等)内的事件,从输入开始。显然我需要经常使用bind()。 这就是我目前所拥有的,它
我有一个函数可以获取 XML 文档并根据 XSL 文档对其进行转换。然后,它将结果放入 id 为 laneconfigdisplay 的 div 中。我想要做的是,与转换逻辑分开,为该 div 设置一
如何检测 NSTextView 中的一行(即“\n”字符)被删除?我可以使用 textView:doCommandBySelector: 轻松监听新行并监听 "insertNewLine:"。 (参见
我有以下代码订阅 VisiblePosition 的属性更改事件Column 的属性(property)类(class): DependencyPropertyDescriptor dpd = Dep
我正在尝试在本地主机上收听浏览器的 DNS 请求。 我写了这段代码: WSADATA wsaData; unsigned char hostname[100]; int sockfd; struct
如何以 JSON 对象的形式接收对我网站上特定页面的回调?这些回调是从第三方 API 发出的,用于报告我与该 API 的通信状态。 我想过使用node.js的http.server.listen,但我
我是一名优秀的程序员,十分优秀!