jQuery事件在新创建的元素上不起作用
问题描述：jQuery事件在新创建的元素上不起作用。
答案：当使用jQuery动态创建新的元素时，这些新创建的元素默认是没有绑定任何事件的。这是因为jQuery事件绑定是基于文档加载完成时已存在的元素进行的，对于后来动态添加的元素，需要使用事件委托（event delegation）的方式来绑定事件。
事件委托是指将事件绑定到已存在的父元素上，然后通过事件冒泡的机制来触发处理函数。这样就可以确保新创建的元素也能够响应相应的事件。
下面是一个示例代码，演示如何使用事件委托来绑定事件：
// 绑定事件委托到父元素上
$(document).on('click', '.new-element', function() {
// 处理函数代码
});
// 动态创建新元素
var newElement = $('<div class="new-element">New Element</div>');
// 将新元素添加到文档中
$('body').append(newElement);在上述示例中，我们将事件委托绑定到document对象上，并指定了要监听的事件类型（这里是click事件）。通过选择器.new-element来过滤触发事件的元素，这样只有具有new-element类的元素被点击时才会触发处理函数。
需要注意的是，选择合适的父元素来绑定事件委托是很重要的。如果父元素过于通用，可能会导致事件冒泡的频率过高，影响性能。因此，建议选择最近的共同父元素来绑定事件委托。
推荐的腾讯云相关产品：腾讯云函数（云函数是一种无服务器计算服务，可以在云端运行代码，无需搭建和管理服务器。通过腾讯云函数，可以方便地处理动态创建的元素的事件绑定。）
腾讯云函数产品介绍链接地址：https://cloud.tencent.com/product/scf
相关·内容
2回答
如何使用jquery/javascript禁用span。脚本
$('#spanid').attr("disabled", 'disabled');
在IE上运行良好，但在firefox上不起作用。
浏览 0提问于2011-07-18得票数 4
回答已采纳
2回答
我希望在div中捕获按下的键(使用tabindex)，但不希望在div中的输入文本聚焦时捕获。我尝试使用jquery的.not()，但它实际上不起作用：
$('#content').not('input[type=text]').keydown( function(e) {
console.log(e.which);
});
举个例子。
浏览 5提问于2015-07-07得票数 1
回答已采纳
我使用Jquery插件在标签上显示工具提示，但现在我向我的网站添加了ajax请求。因此，当我请求新链接(通过ajax)时，工具提示插件在这些链接上不起作用。
我知道这个插件的作用是：
//Select all anchor tag with rel set to tooltip
$('a[rel=tooltip]').mouseover(function(e)
...
有没有办法重新加载javascript，这样我就可以有鼠标悬停功能了？在ajax请求中添加了什么？谢谢。
编辑:这是我的。
浏览 1提问于2011-05-02得票数 0
我有可拖动的元素与按钮。但按钮在Android Chrome上不起作用。
<div id="draggable" class="ui-widget-content">
<p>Draggable Div</p>
<div id="clickAction">Click Me! (I should change colour)</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jq
浏览 0提问于2018-12-14得票数 0
2回答
我有一个jQuery函数，它在元素循环中的每个元素上显示隐藏内容。这可以很好地工作，但问题是，当我向循环添加新元素时，它就停止工作了。它实际上在某些元素上有效，而在其他元素上不起作用(奇怪的行为)。 jQuery(document).ready(function($) {
$(".see_all").click(function(){
if ($(this).next().css('display') == 'none'){
$(this).next().show();
}
else
if($(this).next().is(&#
浏览 37提问于2012-08-21得票数 3
回答已采纳
我有一个包含几行的html表，我包含了一个jquery函数，如下所示
$('tr').mouseover(function() {
$(this).addClass('row_over');
});
因此，将鼠标悬停在该特定行的css类上时，会发生更改。然后我使用jquery添加了另一行，但是鼠标悬停函数在动态添加的行上不起作用，鼠标悬停函数在除了这个新的行之外的所有行上都起作用。
请帮我解决这个问题
谢谢
浏览 1提问于2010-07-26得票数 1
回答已采纳
4回答
我正在尝试用jQuery添加和删除表行，添加的行包含一个删除链接，由于某些原因，它在生成的元素上不起作用，尽管我使用了on。
下面是我的代码：
$("#target").click(function() {
$('#myTable tr:last').after('<tr><td>Bla</td><td><div class="remove">REMOVE</div></td></tr>');
});
$(".remove
浏览 5提问于2012-12-13得票数 0
回答已采纳
我正在使用ajax调用一个页面，我在该页面上有jquery，但当我调用该页面时它不工作。以下是代码示例。
<a href="javascript:();" onclick="getdata('page.php','example');">Load Page</a>
<div id='example'></div>
在加载的页面上
<script>
$( function() {
$("#divexample").click( fun
浏览 0提问于2013-06-07得票数 0
回答已采纳
我正在寻找一种方法，可以让jquery在页面中创建<div>时自动更改它的内容。
具体地说，我要做的是使用jquery将django模板加载到页面中。其中一些模板包含我想要在它们进入浏览器时立即更改的。
作为一个简单的例子，我希望下面的代码能够工作：
$(".load_into").live("load",function(){$(this).html("Dynamic content!");});
但是，"load“不是可以与<div>一起使用的事件类型，因此它实际上不起作用。有什么简单的方法可以做到这一点吗？谢
浏览 0提问于2010-08-10得票数 0
回答已采纳
我在我的网站上使用了jQuery accordion；它在Windows和Android设备上运行正常，但在iPhone设备上不起作用。
我的jQuery代码如下：
<script type="text/javascript">
var accordion;
jQuery(document).click("ready", function(){
accordion = jQuery("#accordion").accordion();
});
</script>
浏览 0提问于2015-09-23得票数 0
我有一组作为按钮的Div。这些按钮有一个简单的jquery click()函数，它适用于除iOS以外的所有浏览器。
例如：
<div class="button">click me</div>
和
$('.button').click(function(){
alert('hi');
});
我不确定为什么这在iOS上不起作用--显然在iOS中没有“点击”功能。
不幸的是，我没有自己的iphone设备来测试这一点，但我从我的客户那里收到了很多投诉，他们想点击东西，但什么都没有发生。
让它工作的关键是什么？
浏览 0提问于2012-05-14得票数 19
回答已采纳
1回答
我想用jQuery实现双击事件，但是它只在计算机上工作，在iPad上不起作用。
我的活动：
$('td').on('dblclick', function(e) {
console.log('test');
});
浏览 5提问于2014-04-29得票数 0
我已经查看了很多帮助jquery datepicker在克隆行上不起作用的页面，但我似乎无法将我找到的任何建议转换为我的特定情况。这里是提琴链接：任何建议都将不胜感激。
$(function() {
$( "#datepicker" ).datepicker();
});
var i = 1;
$("button").click(function() {
$("table tr:first").clone().removeClass('hasDatepicker').find("input").each(
浏览 0提问于2013-06-27得票数 2
回答已采纳
1回答
你好，我知道周围几乎没有相同的问题，但我找不到答案的答案，所以我第一次在这里发帖。
我里面有简单的li和标签
<li class="task">
<input type="checkbox" id="task-1" />
<label for="task-1">Random text></label>
</li>
触发“完成”类的jQuery是：
$(".task").click(function (e) {
var cb =
浏览 2提问于2016-01-05得票数 1
回答已采纳
我正在使用一个简单的切换脚本来显示/隐藏-它在桌面浏览器上工作得很好，但在移动设备上不起作用。我试着在论坛上搜索，但一无所获。
jQuery(document).ready(function(){
var $socialbar = $('#socialbar');
jQuery('#social-icons span#social-hover').on('click', function(e){
e.preventDefault();
if($(this).attr('id') == 'social-
浏览 0提问于2014-06-08得票数 1
我正在尝试做一个功能，用户在一个文本框中键入，当你键入时会产生建议(就像Google Instant)，然后这些建议可以被拖到页面上的框中。一切都很好，直到我发现触摸屏移动设备不能使用HTML5拖放和拖动。我试着用jquery来解决这个问题，但是进展并不顺利。
下面的代码显示了一个可拖动的图像，它适用于触摸屏和鼠标。
<script type='text/javascript' src='js/head.min.js'></script>
<link rel='stylesheet' type=
浏览 1提问于2012-09-03得票数 1
回答已采纳
我正在使用jQuery .load()在我的页面中包含一些HTML。内容按预期显示，但包含的HTML的所有事件边界都无法工作
$('.main').empty().load("foo.html");
$(function() {
$('select').on('change', function(){
alert('bar');
});
});
它在桌面上工作，但在移动平台上不起作用。我不明白为什么..。我认为load()函数应该对此负责，因为一旦我将HTML直接放到主页中，它就能工作.
浏览 1提问于2019-02-19得票数 0
回答已采纳
以下示例插件在动态创建的元素上不起作用。
请参阅
$.fn.getData = function() {
return this.click(function() {
alert($(this).data("aloc"));
});
};
$("a").getData();
我可以使用jQuery.livequery插件做为
$("a").livequery(function() {
$(this).getData();
});
但是我想在我的插件中没有livequery的情况下实现这个功能
浏览 4提问于2014-06-19得票数 2
1回答
在这个中，有一个使用jQuery从表中选择和突出显示整行的解决方案。当我单击表上的一行时，我有一个回调(见脚本的底部)。问题是，我的表是从数据中生成的，因此回调在生成的单元格上不起作用。回调对未生成的标头起作用。
如何将现有回调附加到新生成的元素？
<style>
.selected {
background-color: brown;
color: #FFF;
}
</style>
<body>
<table id="table" border="1" ContentEditable>
<tb
浏览 5提问于2015-09-20得票数 0
回答已采纳
我使用jQuery在.item-table中添加附加内容。
添加代码后，html以所有正确的css样式完美地呈现内容。问题是，我在.js中编写的代码不起作用。
现在有两个按钮:1)按钮，2)通过jQuery添加的按钮
.click在第1种情况下工作，但在2上不起作用)
你需要重新应用js文件吗？或者还有别的东西可以解决这个问题呢？
与“..item删除-按钮”关联的单击事件
$('.item-delete-button').click(function(){console.log("test")};
添加到html中的代码。
$('.item-tabl
浏览 3提问于2014-11-30得票数 0
回答已采纳
2回答
以下jQuery在IE9上不起作用。不幸的是，我使用的是jQuery 1.4
var denomAmount = j(this).closest('.denom').children('.denomValue').eq(0).val();
Dom结构如下所示
<tbody class="denomTable">
.......
<tr class="denom">
...........
<td>
<input typ
浏览 0提问于2013-05-18得票数 1
回答已采纳
1回答
我有一个主页，当文档准备就绪时，我已经通过ajax在它上加载了另一个页面，我还有一个按钮，当我单击它时，我会显示一个警告，第二个页面中也有这个按钮。但是当我在那个页面上点击它的时候，代码不起作用了？我该如何解决这个问题？
因为我不想在第二页重复js codes？
以下是我的第一页代码：
首页代码：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
浏览 2提问于2017-12-21得票数 5
回答已采纳
我的应用程序中有两个CodeIgniter视图，它们都有一个文本字段。我的问题是，当我的应用程序加载时，我的jQuery代码只能在第一个CodeIgniter视图上工作。当我的应用程序显示第二个视图时，我的jQuery代码无法工作。
$(document).ready(function() {
$(".input-field").attr("value","I'm looking for...");
var text = "I'm looking for...";
$(".input
浏览 0提问于2013-09-04得票数 0
1回答
从调试控制台中选择日期
、、、、
当我通过单击日期选择日期时，我正在尝试检测datepicker使用的是哪种事件。
下面的代码在chrome上工作，但在firefox上不起作用，我不明白为什么。
此外，我还找到了第二种类型的datepicker，当我手动从click事件中选择日期时，它不会做出反应。但是，该结构与datepicker相同，它通过单击提供所选的值。
我的问题是，鼠标单击所触发的东西是否也必须从jQuery单击事件触发？如果是，为什么在我的例子中(我指的是第二个datepicker)不被单击事件触发？为什么单击事件不与鼠标单击相同？
$('document').ready(function()
浏览 2提问于2016-12-12得票数 0
我已经在.toggle()和下面的更长的表单中尝试了这种方法。如果我去掉.replaceWith的行，就可以显示和隐藏#-表单，但是有了它.#窗体未隐藏和显示窗体更改正确，但对于下一次单击都不起作用。
有人能看出我做错了什么吗？
<script type="text/javascript">
jQuery('#show-form').click(
function() {
if (jQuery("#the-form").is(":hidden")) {
浏览 4提问于2011-11-19得票数 1
回答已采纳
我有一个非常简单的测试phonegap + jquery移动应用程序。这是一种简单的形式。代码如下：
<!-- Styles -->
<link type="text/css" rel="stylesheet" href="jquery-ui-mobile/jquery.mobile-1.3.1.min.css">
<!-- jQuery and jQuery Mobile -->
<script src="https://d10ajoocuyu32n.cloud
浏览 3提问于2013-05-27得票数 1
回答已采纳
2回答
我在我的页面上使用了jQuery日历和输入掩码插件，它们工作得很好。我有一个Add按钮，它添加一个带有文本框的行，但是插件在新添加的行上不起作用。我该如何解决这个问题呢？如果在add按钮单击事件中再次调用插件代码，它们似乎可以工作，但我想知道是否有更好的方法来使其工作。谢谢。
$(".add-row").on("click", function () {
// Add row
// Call AGAIN to make it work
$(".time").mask("99:99");
$(&
浏览 4提问于2013-03-29得票数 0
我在文本框中使用ui-autocomplete。一旦用户选择了自动完成下拉框并离开该文本框，它就会自动填充所有其他文本字段。所有这些都可以在pc上运行，但不能在移动网页上运行。我发现这与ui-autocomplete插件有关，它不会让移动浏览器拾取更改事件。 我看过类似的案例，但似乎解决不了这个问题。我对jQuery非常陌生 如果我取消对最后一个插件的注释，更改事件将被拾取，但自动填充将不起作用。 <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script typ
浏览 35提问于2019-10-04得票数 0
我在MDN中看到，focusout在火狐上不起作用，但是为什么在jQuery上使用它呢？jQuery背后的巫术是什么？谢谢。
$(".input1").on("focusout", function() {
console.log("jquery focusout");
});
document.querySelector(".input2").addEventListener("focusout", function(){
console.log("focusout");
})
浏览 7提问于2015-11-09得票数 1
回答已采纳
1回答
我用可点击的DIV创建了一个网站：
jQuery("#add").on('click', function(e){
addlist();
});
它在台式机上工作，但在触摸屏上不起作用。我希望有人能告诉我如何让它在触摸屏上点击。
浏览 2提问于2013-08-04得票数 1
回答已采纳
2回答
我很难理解update()方法。当我使用widget.update()时，小部件应该重新创建自己(或者如果我使用root.update()，那么根用户中的所有小部件都会重新创建自己)。但我的程序不会这么做。重新创建小部件的最简单方法是什么？我显然可以在标签和其他东西上使用configure，但是它在OptionMenus上不起作用，对吗？那么，我如何重新创建小部件，如选项菜单？
from tkinter import *
def f1():
menu = menu = OptionMenu(root, var, "hello", "hi", "
浏览 1提问于2020-11-12得票数 0
回答已采纳
1回答
在ajax响应中，我附加了一个anchor标记，然后想要自动单击这个锚标记，但是这个单击事件在这个附加的anchor标记上不起作用。它适用于普通元素，但不适用于附加内容。下面是我正在尝试的click事件
jQuery('#download_pdf_url').trigger('click');
下面是我如何首先将这个锚标记附加到ajax响应上，然后尝试触发一个单击事件。
var url_href = window.location.protocol + "//" + window.location.host + "/pdf_files/f
浏览 19提问于2018-09-07得票数 1
回答已采纳
我正在尝试删除HTML字段，但删除在动态添加的字段上不起作用。
$('.delete-ques').on('click', function() {
alert('hello');
$(this).parent().remove();
return false;
});
尝试添加div并删除
浏览 0提问于2016-05-19得票数 1
我正在将一些带有ajax的超文本标记语言注入到我的页面中，但是在注入的超文本标记语言的一部分上的onclick处理程序似乎不起作用……
基本上这张图片..。
< img class="close_row" src="img/close.gif"/>
我的jquery是这样的：
$('.close_row').click(function() {
// some code to close the row
});
打开行并注入html的原始函数运行得很好，我是不是忽略了什么？
浏览 3提问于2011-06-21得票数 2
回答已采纳
我一直在使用jquery livequery插件和jquery live。然而，现在我使用的是1.4，jquery livequery似乎不能100%工作。
所以我不知道该如何解决这个问题
我把这个放在livequery
$('#Description').livequery(function ()
{
$('#Description').htmlarea({
toolbar: [
["bold", "italic", "underline", "strike
浏览 3提问于2010-05-12得票数 0
回答已采纳
我已经使用jquery完成了一项任务。
在这个页面中，jquery和Ajax起着至关重要的作用。
Jquery事件如拖放、预览、创建新框和Ajax事件(如编辑描述和搜索)都发生在那里。
现在的问题是，诸如拖放之类的一些功能在平板电脑和ipad.上不起作用。
我该怎么办才能解决这个问题呢？
我知道这个问题可能不是很具体。但由于我是个新手，我需要一些一般性的想法来解决这个问题.
浏览 3提问于2011-12-22得票数 0
我正在写一个评分者脚本，所以项目可以被评为1到5星。我的脚本一开始起作用，使明星从当前的评级更改为任何他们被鼠标滑过的评级，然后当他们鼠标移出时又回到当前的评级。但话说回来，在星空上空盘旋不会引起任何变化。(在此期间没有点击。)
所以hover起作用，然后mouseleave起作用，然后hover不再起作用，尽管mouseleave继续起作用。下面是我的javascript文件中的代码：
$(document).ready(function(){
$("img.rateImage").hover(function(){
$(this).attr("
浏览 2提问于2011-11-10得票数 1
回答已采纳
我有一个带有选择选项和表单的网页，当用户更改选择时，我的jquery脚本函数将动态执行ajax POST，以不同的表单(新表单元素)替换原始表单。
但是我注意到Click处理程序($(button).click()事件)在新生成的表单上不起作用。请在这方面提供帮助。
这是Jquery中的已知问题吗？
<select id=choice><option>....</select>
<div class=mytable>
<form id='dataform-10'>
.....
<button id="ed
浏览 19提问于2019-10-27得票数 1
回答已采纳
2回答
所以我有一些基于悬停和点击的扩展和拼接功能。该函数在基本测试中运行良好，但在站点上不起作用。当用户单击Expand A和Expand B时，外部容器将随之展开，因为您可以在中测试它。但是，当将相同的代码应用于时，外部容器不会随展开的div展开。相反，如果div太长，它会使用扩展的div。这里我漏掉了什么？
提前谢谢。雷克斯
附言:我不能使用较新版本的jQuery或更改布局。这就是CMS的设置。但是，我可以更改css属性和javascript函数。
jQuery脚本在测试版本上运行良好：
但它在网站上不起作用：
浏览 2提问于2011-12-06得票数 0
回答已采纳
1回答
我正在开发一个响应式的应用程序。我的问题是为什么“模糊”功能在iOS设备上不起作用？
这是一个在iOS移动设备上不起作用，但在安卓和台式机上起作用的代码示例。
var a = $('<a href="javascript:return false;" title="'+ListeTypes.jsonData[i].title+'" id="typ'+i+'"> </a>');
a.on("click", function(event){
浏览 1提问于2015-08-28得票数 1
2回答
我在carousel中有一个项目，并将.click()事件绑定到它。而且它工作得很好，因为该项目在carousel的第一页中，并且在加载时就可见。
但是如果我移动旋转木马，使其不可见，然后移回视口，click()事件就不再起作用了吗？
当它可见时，我可能只需要以某种方式再次注册它？
顺便说一下，单击用于打开模式jQuery UI对话框
谢谢
浏览 1提问于2012-02-23得票数 1
回答已采纳
4回答
我使用Jquery创建一个元素，并给它类.book
jQuery('<div/>', {
name: "my name",
class: 'book',
text: 'Bookmark',
}).appendTo('body');
然后，我想在那门课被点击时做点什么，所以我自然地写了一个简单快捷的文章：
$('.book').click(function(){
alert('I have been clicked');
});
工作的，
不
浏览 2提问于2013-07-24得票数 2
回答已采纳
4回答
我用javascript制作了窗口对象。我想给windows对象添加一些函数。但是.onclick、.setattribute和.addEventListener不能处理我的对象。当我给出css或javascript的值时，即使是鼠标光标也不能改变。它在我的源码的499行。你能告诉我为什么这些不起作用吗？我应该改变语言吗？是bug吗？
function seSizeValue(theNumOfWins,outlayerId){
var seSizeValue;
var seSizeValueId;
seSizeValueId = "seS
浏览 0提问于2014-12-05得票数 0
在中，我在<body>之后有以下内容
<a name="Pagetop"></a>
在我的脚上，我有：
<script>
jQuery(".pgtop").click(function() {
jQuery('html, body').animate({
scrollTop: jQuery("#Pagetop").offset().top
}, 2000);
});
</script>
<p c
浏览 0提问于2018-05-18得票数 0
回答已采纳
我有一个web应用程序，可以在页面加载时加载javascript：
$(function() {
$('.modal-delete').click(function() {
alert();
});
});
我有一个带有一系列按钮的html页面，当它们被点击时，它们会提醒一个空白的消息框：
<button class="modal-delete btn danger"></button>
它工作得很好。
然而，有一些AJAX调用可以生成更多的按钮，就像上面的那些，但不是在页面加载时！它们可以在任何时候创建。这些按钮不做任何
浏览 0提问于2012-01-30得票数 0
回答已采纳
4回答
窗体上所有元素的公共事件
、、、
每当表单中任何元素的值发生变化时，我都希望触发一个公共事件。在表单元素的值的基础上，我想实现代码。
我正在写下面的代码，但onchange事件在formid上不起作用。
$("#formid").change(function () {
//code
});
or this
$("#formid").bind("change", function () {
//code
});
当元素的值有任何变化时，如何在窗体上触发事件？
浏览 0提问于2012-05-11得票数 2
2回答
我正在使用下面的代码来隐藏滚动上的导航栏，但它似乎在我正在测试的iPad上不起作用。
jQuery(document).ready(function($) {
var previousScroll = 0,
headerOrgOffset = $('.hide-nav').height();
$('.sq-header-nav').height($('.hide-nav').height());
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if
浏览 1提问于2013-12-27得票数 0
我有一些html，比如：
<ul class="myclass">
<li><input type="checkbox"/>some text</li>
<li><input type="checkbox"/>some text</li>
<li><input type="checkbox"/>some text</li>
</ul>
我希望通过单击复选框或其任何部分来切换复选框。
浏览 4提问于2011-05-08得票数 2
回答已采纳
3回答
我正在使用jQuery对话框。我有一个试图解决的问题是：
我已经创建了点击锚类的对话框，并且它正在工作。在此之后，我又创建了一个具有相同类的锚标签，单击新创建的标签对话框不起作用。
下面是html：
<div id="loader_ajax"></div>
<a id="show_hide_window1" class="show_hide_window" href=""> Dialog </a>
<div class="next_tg"></div
浏览 2提问于2015-05-12得票数 1
1回答
我已经查看了其他问题和其他网站在线，并没有能够找到一个方法，使addEventListener工作。
我有一个名为“为每个按钮添加按钮和添加事件侦听器”的函数
function displayData(){
for(var key in localStorage){
addButton(key);
}
}
function addButton(name){
var button = '<button id='+ name +'>'+name+'</button>';
doc
浏览 0提问于2017-11-18得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
