绑定到动态创建的元素的事件.(jQuery 1.7.2)
绑定到动态创建的元素的事件是指在jQuery中，当一个元素是在页面加载后动态创建的时候，如何为其绑定事件。在jQuery 1.7.2中，可以使用“事件委托”的方法来实现这一目标。事件委托是一种将事件监听器添加到父元素上，而不是直接添加到目标元素上的方法。当事件触发时，会通过事件冒泡机制到达父元素，然后在父元素上执行事件处理函数。
以下是一个使用事件委托的示例：
$(document).ready(function() {
// 监听.btn-dynamic类的click事件
$(document).on('click', '.btn-dynamic', function() {
// 在这里执行事件处理函数
console.log('动态创建的元素被点击了');
});
});在这个示例中，我们将事件监听器添加到了document对象上，并指定了.btn-dynamic作为要匹配的元素。当点击任何具有.btn-dynamic类的元素时，事件处理函数将被执行。
这种方法的优势在于，即使在页面加载后动态添加了新的匹配元素，事件依然能够正常工作。这是因为事件监听器实际上是添加在父元素上的，而不是直接添加在目标元素上。
推荐的腾讯云相关产品：
- 腾讯云对象存储（COS）：一个高性能、低成本、可扩展的云存储服务，可以用于存储和管理网站上的静态资源。
- 腾讯云内容分发网络（CDN）：一个全球内容分发网络，可以加速网站的访问速度，提高用户体验。
- 腾讯云云服务器：一个可扩展的、高性能的云计算服务，可以满足各种应用的计算需求。
产品介绍链接地址：
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
- 腾讯云云服务器：https://cloud.tencent.com/product/cvm
相关·内容
我想将一个事件附加到JavaScript中的一个元素，问题是我只知道一个简单的事件附件没有参数，但是在这里我想附加一个带有this参数的事件，如下所示
element.addEventListener("onclick",
function RemoveDirectory(this) {
alert(this);
});
当然，在这里，this应该提到element。
编辑
我尝试使用Jquery，但是由于元素不是从DOM中选择的，
浏览 12提问于2012-08-08得票数 0
回答已采纳
我动态生成一些标记并将其注入到DOM中，如下所示：
content+='<td><a class="reportLink" onclick="showReport();return false;" href="'+layerResults.features[i].attributes['Information_External']+'">Info</a></td>';
我知道使用jQuery来附加单击处理程序要比使用内联处理程序更好。
问题是，即使使用
浏览 0提问于2012-08-07得票数 1
回答已采纳
此代码适用于jQuery 1.7.2：
$('.category').live('click', function() {
alert('clicked');
});
但是，当我切换到使用addClass时，没有添加任何类：
$('.category').live('click', function() {
$(this).addClass('active');
});
有人能告诉我为什么和如何使用live()来完成这个任务吗？谢谢。
浏览 1提问于2018-02-27得票数 0
我的印象是，jQuery的事件处理程序应该能够“侦听”动态创建的元素，并且应该替换的行为。然而，我所经历的是，使用on并不是捕获单击事件，而使用live是成功的！
我的情况的一个棘手的方面是，我不仅动态地创建内容，而且还通过AJAX .get()调用执行，并将得到的HTML插入到一个模态.dialog() jQueryUI弹出中。
下面是我试图完成的任务的简化版本(包装在$(document).ready(...)中)：
$.get("getUserDataAjax.php", queryString, function(formToDisplay) {
$("
浏览 3提问于2012-10-02得票数 9
回答已采纳
我希望使用toggleClass文件动态生成jQuery $.ajax({.})生成的列表。它在带有Safari和Chrome的桌面上工作得很好，但在移动Safari上却不行。委托和直播也不能在手机上工作。
我使用的是jQuery 1.7.2 iPad (iOS 5.1) iPhone (iOS 5.0.1)
不使用jQuery手机
jQuery文档建议使用.on()而不是.live()，因为从1.7开始就不推荐live
oringal html
<ul id="movies">
/* empty */
</ul>
动态构建后
<ul id=
浏览 11提问于2012-03-26得票数 3
回答已采纳
6回答
我发现有两篇关于新函数.on()的很好的文章：，。
有没有比.on()更好用.bind()的方法？
例如，我有一个示例代码，如下所示：
$("#container").click( function( e ) {} )
您可以注意到，选择器只检索了一项，在本例中，页面加载时，名为#container的<div>已经存在；不是动态添加的。值得一提的是，我使用的是最新版本的jQuery: 1.7.2。
对于该示例，即使我不使用.on()函数提供的其他功能，也应该使用.on()而不是.bind()吗？
浏览 1提问于2012-08-07得票数 216
回答已采纳
5回答
为什么jquery选择器对新替换的标签不起作用。
我有一个简单的脚本，当用户单击submitResult button时，服务器端返回一个包含id="content“的新div，我使用jquery replaceWith()替换旧的div。
我注意到在替换了id="content"元素之后，下次单击submitResult时，它不会将数据发送到服务器端。仅供参考，此submitResult id位于新替换的元素中。
谁能告诉我如何刷新替换html标签，从而让$("#submitResult").click(xxx)再次工作？
谢谢
<html>
浏览 1提问于2013-03-16得票数 3
回答已采纳
我有一个使用jQuery 1.3的Drupal站点，所以不幸的是我不能使用live函数。我需要截取一个动态创建的项目的点击/更改事件。如果不使用live，我如何做到这一点？我不能升级到jquery 1.4。
浏览 1提问于2010-11-15得票数 0
回答已采纳
使用jQuery将事件绑定到具有静态祖先的动态创建元素相当容易，如所示
$(staticAncestors).on(eventName, dynamicChild, function() {});
但是如果dynamicChild是dynamicAncestor呢？是否有任何办法使下列工作：
$(dynamicAncestors).on(eventName, dynamicChild, function() {});
浏览 8提问于2016-08-13得票数 0
回答已采纳
7回答
下面的代码我用来创建一个滑动菜单。我需要知道如何解除绑定到click事件的函数，并在其他时间重新绑定它。(使用jQuery 1.7.2)
$(document).ready(function(){
$('.section').hide();
$('.header').click(function(){
if($(this).next('.section').is(':visible'))
{
$('.section:visible').slideUp()
浏览 0提问于2012-04-27得票数 2
回答已采纳
我正在将一个项目中使用的jQuery版本升级到最新和最好的版本。在许多地方都使用.live函数来更改动态创建的显示，并且工作得很好，但是.live功能在jQuery的后期版本中被删除，因此需要重新开发工具。
作为编码标准化的一种方式，我正在考虑将该函数称为：
$(document.body).on('click', '#clickableElement', function(){})
而不是
$("#clickableElement').on('click', function(){})
即使没有对动态创建的对象执行click方法
浏览 4提问于2014-02-26得票数 0
回答已采纳
2回答
我使用一个搜索按钮，在服务器端创建一个表单动态，并使用Jquery语法返回它。在我填充表单并单击submit按钮之后，还有另一个.submit() Jquery函数，它应该在数据发送到服务器之前被调用来验证输入。但是，由于某种原因，这个函数永远不会被调用，数据就是请求被发送。详情如下：
这是serach按钮在服务器端动态创建的表单，并使用Jquery“打印”到html页面：
<form action=... name="stockbuyform" class="stockbuyform" method="post">
<inpu
浏览 3提问于2010-05-15得票数 2
我正在使用jQuery将一个函数附加到整个类的单击事件。例如：
$(".clickDiv").click(function(){
$(this).hide();
});
在我的客户端javascript上，我动态地创建了更多的.clickDiv实例。
我是否需要再次调用$(".clickDiv).click(function...)，或者新实例是否会自动将该函数绑定到click事件？
浏览 4提问于2012-04-09得票数 2
回答已采纳
我想知道这在JQuery中是否可能。
我有一些Javascript代码可以动态创建DOM对象，以响应用户的操作。其中一些DOM对象具有特定的结构--容器总是有相同的"class“属性。
我想做的是，每次创建具有类"X“的DOM对象的新实例时，我都希望执行相同的Javascript代码。该代码将向DOM对象添加一个"onclick“事件。
不幸的是，我不能只将分配onclick的代码放在document.Ready()中，因为它绑定到的对象是在document.Ready()执行很久之后动态创建的。
JQuery是否允许设置自动绑定到某种类型的DOM对象的持久绑定，即使它
浏览 0提问于2009-01-27得票数 1
回答已采纳
一定是出了什么问题。我不知道什么？。
/*
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
*/
$("p").on("click", function(){
$(this).after("<p>Now Click Me...Another paragraph!</p>");
});
我选择了jquery 1.7.2。live运
浏览 0提问于2012-07-03得票数 0
回答已采纳
1回答
在取消选中复选框时隐藏列
注意:在你指出基于同一个问题的链接之前，我需要告诉你，我在这里尝试了所有相关的解决方案，但都没有效果。我之所以注册，正是因为这里的解决方案没有一个真正有效。
因此，我的代码允许您动态创建表并编辑表内容。对于创建的每个新列，还会添加一个复选框，当未选中时，该复选框将隐藏创建的列。
这是我的密码：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js&
浏览 4提问于2017-10-14得票数 0
1回答
我想在动态创建的元素上使用jQuery的hover()。我尝试了下面的方法，但没有成功。我该怎么做？我不能使用mouseenter和mouseleave，因为这个页面将嵌入到iframe中。
$(document).on('hover', '.dynamic', function(){
//do
});
浏览 2提问于2015-07-06得票数 0
回答已采纳
我有一个js文件。它包含以下代码：
$("#speedB").change(function () {
var date = $(this).val();
$('.fl_near a').removeClass('selected');
var clientId = $('#wiz_main').data('client');
var eventId = $('#wiz_main').data('event');
$.get('/de
浏览 0提问于2012-08-03得票数 1
回答已采纳
3回答
我有一个链接列表，这些链接是由另一个函数动态创建的，它们的形式是<a id="hi-1">test</a> <a id="hi-2">test</a>等。
我正在尝试将这些链接作为目标，并将单击/鼠标悬停事件绑定到它们。以下是针对其中一个链接(#hi-1)的代码：
$(function() {
$("#hi-1") .bind("mouseover", highlight);
$("#hi-1") .bind("mouseleave"
浏览 2提问于2011-05-28得票数 1
回答已采纳
我想在输入单选元素上放置一个函数。这些输入单选元素是使用动态创建的。一个动态创建(通过用户单击)的输入元素如下所示：
<div class="below">
<input type="radio" value="information" name="option0"/>
Information
<input type="radio" value="communication" name="option0"/>
Com
浏览 1提问于2009-11-25得票数 0
回答已采纳
我有下面这段代码
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$('body').on('click', 'a.wishlist_item', function(){
alert('asas');
return
浏览 2提问于2012-05-06得票数 5
回答已采纳
我有以下动态创建的：
<a class="editLink" href="/location/Edit?city=05">Edit</a>
这行和其他editLink行都是动态创建的。
我想要做的是添加一些jQuery到这些中：
$(".editLink").button();
$(".editLink").click(function () {
alert('edit link');
return false;
});
有没有什么方法可以在元素出现之前给它赋值？另外，我应该
浏览 2提问于2012-01-17得票数 3
回答已采纳
我正在寻找一种在动态插入到页面中的新的.timeago()元素上触发$("abbr.timeago"函数的方法。现在这就是我要做的。
# Triggered on initial page load
# application.js.coffee
jQuery ->
# Timeago
$("abbr.timeago").timeago()
有些元素被动态替换，我发现需要在将它们插入页面后调用timeago函数。
# Triggered after the new abbr.timeago elements have been inserted
浏览 0提问于2013-08-14得票数 0
回答已采纳
我无法将jQuery事件绑定到动态创建的列表项。
这是jQuery添加了begin后，btnRemoveItem上的事件不会触发。
$('#btnAddStore').on('click', function(){
(...)
$.ajax({
success: (function(result) {
(...)
var li = jQuery('<li/>', {
'id': object['id']
}).append(&
浏览 2提问于2013-04-17得票数 1
回答已采纳
在我的jQuery移动应用程序中，我创建了一些动态的pages.Here代码
function createPages()
{
$header = "<header data-role='header'><h1>Dynamically created pages</h1></header>";
$content = "<div data-role='content' class='content'><p>This is a dynami
浏览 1提问于2012-01-24得票数 1
2回答
在下面的小提琴中，是否可以将监听程序附加到投票按钮，以便在单击投票时触发一个监听程序，在本例中只是一个警报？
我尝试将css附加到侦听器，但不起作用。：
$('.pds-return-poll').on('click', function () {
alert('here');
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&
浏览 2提问于2012-07-03得票数 1
回答已采纳
我有一个通过使用表动态生成网格的脚本。
//createGrid(height, width);
createGrid(1, 2);
//one row with 2 cols
这将创建以下内容：
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
我需要一个用于添加/更改类的td标记的onclick事件。我已经尝试了几种解决方案，但都没有效果。有什么想法吗？我不擅长Jquery。
浏览 2提问于2012-10-28得票数 0
我有一个带有id="modal"的<div>，它是用jQuery load()方法动态生成的：
$('#modal').load('handlers/word.edit.php');
word.edit.php包含一些输入元素，这些元素被加载到一个模态<div>中。
使用jQuery的keyup方法，我可以在事件触发后捕获输入值，但是当元素被动态添加到模式div时，当用户输入文本时，事件不再触发。
哪个jQuery方法支持处理由动态创建的元素触发的事件？
用于创建新输入元素的代码为：
$('#add').c
浏览 1提问于2012-10-11得票数 52
回答已采纳
在Apex 5.0.2。我在互动报告中创建了一个复制到剪贴板的功能。用户可以通过单击列中设置的并在每一行中重复的按钮复制隐藏列的值(请参见下面的图像)。
copy列使用HTML表达式进行编辑，该表达式执行以下操作：
<button class="copytoclipboard
t-Button
t-Button--noLabel
t-Button--icon
t-Button--stretch" customid="#COPY#" type="b
浏览 2提问于2019-03-05得票数 1
回答已采纳
这里我漏掉了什么？
<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
<script>
$("a").click(function() {
alert("Handler for .click() called.");
window.location.reload();
浏览 0提问于2012-09-21得票数 0
回答已采纳
我正在使用jQuery使一个div出现和消失。这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$('.button')
浏览 3提问于2015-07-23得票数 0
在我的项目中，我将使用的jQuery版本从1.4.2更新到了1.7.2。现在，在处理<tr>元素的单击事件处理程序时，我观察到了一些意外的行为。
多个站点包含的表的第一列中有一个单选按钮。所以HTML看起来像这样
<table>
<tbody>
<tr onclick="selectOnClick(this)">
<td><input type="radio" .... /></td>
......
</tr>
...
在一
浏览 0提问于2012-07-19得票数 0
回答已采纳
是真的吗？
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#reset").click(function(){alert("hi");});
});
</script>
<ul>
浏览 2提问于2013-09-11得票数 1
回答已采纳
我想在jQuery对话框框上动态创建一个带有按钮的输入框。此外，我想删除输入框，当我点击一个按钮。
目前，我可以创建按钮和输入框。但是，新创建的html元素上的任何类型的事件都不能工作。因此，我无法删除创建的输入框。
有什么解决办法吗？
浏览 1提问于2017-05-05得票数 0
回答已采纳
我有一个非常基本的怀疑..。
在我的wordpress博客里，在我的自定义metabox中，
这是我的事件处理程序：
jQuery('tr input.test').on('click', function( event ){
event.preventDefault();
var index = jQuery(this).closest('tr').index();
set_row_index(index);
.
.
.
});
我有一个表，最后一列有按钮(输入类型->submit)
浏览 4提问于2016-08-30得票数 0
回答已采纳
我在jQuery插件中创建了一个元素：
this.addButton = $("<a>", {
text: "ADD",
"class": "addButton"
}).appendTo(this.element);
然后我添加了实时功能：
this.addButton.live("click", function() {
that.somefunction("ad
浏览 0提问于2011-09-28得票数 1
回答已采纳
Jquery允许动态地将事件绑定到html元素。除此之外，如果每次更改复选框值时都要调用一个函数，那么使用jquery (“change”)绑定函数与直接将onchange属性添加到jsp中的html元素相比有什么好处吗？
浏览 2提问于2015-11-06得票数 0
回答已采纳
可能重复：
我需要将jquery回调关联到动态内容上。
例如：
<script type="text/javascript">
jQuery(document).ready(function() {
$("#createContent").click(function(){
$("#myCont").append('<img class="myImg" src="icon.png" />');
});
});
</scrip
浏览 6提问于2012-12-27得票数 1
回答已采纳
这在动态html的jQuery 1.6.4中工作得很好：
$(".selector").die().live("click", function () {
alert("clicked");
});
但我注意到在jQuery 1.7.1中，.live()已被弃用，取而代之的是.on()。如何在动态html中使用.on()？使用.die().on("click", function())不起作用，.off().on("click", function())也不起作用。
谢谢!
浏览 0提问于2012-01-16得票数 1
回答已采纳
1回答
我正在开发一个允许用户从对象生成对象的系统。它类似于Win7粘滞便笺系统；粘滞便笺可以生成新的粘滞便笺，并将其自身删除。我正在尝试用jquery来实现这一点，但是当我尝试添加新对象时，会出现复制问题。
在jquery中，我告诉代码创建第二个" object“，它是一个变量，用于保存包含add和delete按钮的对象的html。如果你查看html页面，它就更有意义了。当我告诉jquery创建对象时，它完美地完成了。除了它生成的对象不会生成更多的对象！由于某种原因，jquery无法识别它刚刚创建的新对象的存在。作为解决方案，我尝试重复使用.click()函数，该函数侦听用户单击add或de
浏览 0提问于2012-05-17得票数 0
回答已采纳
可能重复：
我的代码在使用$('thing').live("mousemove", function(e) {和$('thing').live({mouseenter:function(e) {时工作得很好。我注意到jquery说live贬值了，并且使用了on，所以我就这么做了。然而，它似乎不像我所期望的那样起作用。我有mousemove事件，但是由于对象是动态加载的，所以不能触发事件，这就是我使用live的原因。现在，live工作得很好，但是当我使用on时，jquery建议它看起来像.mousemove之类的。它适用于执行代码时存在的
浏览 14提问于2012-10-19得票数 0
回答已采纳
5回答
因此，如果CSS转换不起作用，我想加载jquery作为备份。使用现代化的工具，它工作得很好。
如果我把jquery包含在头文件中，jquery就能正常工作，比如
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
但如果我尝试像这样动态添加它，就不会这样
var fileref=document.createElement('script')
fi
浏览 0提问于2012-06-29得票数 0
我正在创建一个动态表，其中在单击按钮时添加了一个新行。此表包含一个名为Delete的列。每当单击delete a-链接时，将删除相应的行.但是我的jquery不起作用。
从表中删除条目的代码片段是：
$(".delRow").click(function()
{
alert("Called");
$(this).parents('tr').first().remove();
浏览 3提问于2013-07-16得票数 2
回答已采纳
我需要检测动态添加到表中的行上的单击事件(使用jQuery)。该表的id为myTable。
这对于在设计时创建的表行/硬编码到本地页面是没有问题的；我知道我可以使用$('#myTable tr').click(...);
但是，我的用例是通过ajax加载新的表行并将其附加到表中。在这种情况下，不调用click事件处理程序。
在过去，我使用jQuery的.live()函数来处理动态加载的元素，但我发现现在为了支持.on()，该函数已被弃用。这很好，除了它在这种情况下对我不起作用。
下面是一些演示代码和一个显示该问题的。请注意，单击“静态行”会按预期显示一个警告框，但对于动态添加的
浏览 37提问于2020-06-05得票数 1
回答已采纳
首先包含jquery-1.7.2.min，然后包含jquery-ui-1.8.21.custom.min
然后，我使用类名动态创建了div，并对它们调用了draggable和selectable，但它不起作用。在dom中准备就绪
$.each(a, function (l, i) {
$('.browser').append("<div class='folder' id=" + i + "></div>");
});
$('.folder').selecta
浏览 5提问于2012-07-02得票数 3
回答已采纳
我有一个表单，我可以使用jquery/javascript在其中动态添加新的日期字段元素。我正在尝试将jquery的datepicker附加到该日期字段输入(任何小部件/操作都将具有相同的行为)。
<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" class="datepicker"></p>
如果元素出现在页面的原始html中，那
浏览 1提问于2011-03-19得票数 0
回答已采纳
2回答
我有一个标签A，当点击时，它会附加另一个标签B，以在点击时执行操作B。因此，当我单击标记B时，将执行操作B。但是，.on方法似乎不能在动态创建的标记B上工作。
我的标签A的html和jquery如下：
<a id="address" class="add_address btn btn-inverse btn-medium pull-right push-top">Add Shipping address</a>
$('.add_address').click(function(){
//Add another
浏览 0提问于2013-02-26得票数 261
回答已采纳
2回答
我使用的是jQuery 1.7.2，我想要做的是在一个div上激发onmouseover (使用类active)，但是在onmouseout上，将这个类更改为inactive，并将第二类div从inactive转换为active。在此之后，我预计onmouseover现在将在第二div上被触发(我甚至使用.on()，所以它应该是实时的)，但是它不会。
<div class="myDiv active first"></div> <div class="myDiv inactive second"></div>
J
浏览 1提问于2013-06-07得票数 0
回答已采纳
我有一个包含画布的jquery-ui对话框，并且在画布上绘制了一个棋盘，如下所示：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js></script>
<script>
浏览 0提问于2012-04-26得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
