仅在父元素上绑定事件
在前端开发中，"仅在父元素上绑定事件"是一种常见的事件委托技术，也称为事件代理。它的基本原理是将事件绑定在父元素上，通过事件冒泡的机制来处理子元素上触发的事件。
事件委托的优势：
- 减少事件绑定数量：通过将事件绑定在父元素上，可以避免为每个子元素都绑定事件，减少了事件绑定的数量，提高了性能。
- 动态绑定：对于动态添加的子元素，无需重新绑定事件，因为事件是绑定在父元素上的，可以自动处理新添加的子元素。
- 简化代码逻辑：通过事件委托，可以将事件处理逻辑集中在父元素上，简化了代码结构，提高了代码的可维护性。
事件委托的应用场景：
- 列表或表格：对于大量的列表或表格数据，可以将事件绑定在父元素上，通过事件委托来处理每个子元素的点击、选择等操作。
- 动态元素：当页面中存在动态添加或删除的元素时，可以使用事件委托来处理这些元素的事件，无需重新绑定事件。
- 性能优化：对于性能要求较高的页面，通过事件委托可以减少事件绑定的数量，提高页面的响应速度。
腾讯云相关产品和产品介绍链接地址：
腾讯云提供了丰富的云计算产品和服务，其中与前端开发相关的产品包括云函数、云开发等。以下是相关产品的介绍链接地址：
- 云函数（Serverless）：https://cloud.tencent.com/product/scf 云函数是一种无需管理服务器的计算服务，可以帮助开发者更轻松地构建和运行云端应用程序。
- 云开发（CloudBase）：https://cloud.tencent.com/product/tcb 云开发是一款面向前端开发者的云原生后端一体化解决方案，提供了云函数、数据库、存储等功能，帮助开发者快速搭建全栈应用。
请注意，以上链接仅为腾讯云产品的介绍页面，具体的产品选择和使用需根据实际需求进行评估和决策。
相关·内容
HTML：
<div class='cf' id='content'>
<div id='leftColumn'>
</div>
<div class='microposts'>
<div class="micropostContent">
</div
</div>
<div id='rightColumn'>
</div>
<
浏览 0提问于2012-04-10得票数 1
回答已采纳
我有过
$('#myElem').mouseup(function(e){
isMouseDown = false;
});
我想要做的是，只在可能是多个按下事件的第一个事件上触发单个事件(例如，警报或计数器的++1 )。
浏览 1提问于2012-03-23得票数 1
回答已采纳
jQuery .mouseover()函数和.hover()函数有什么不同？如果它们是完全相同的，为什么jQuery会同时使用它们呢？
浏览 0提问于2013-07-11得票数 120
回答已采纳
我有以下问题。每当我用类“jQuery”更改代码中的一个元素时，就应该激活HTML事件。
HTML代码
<div class="controls form-inline">
<label for="ff_elem295" id="bfLabel295" class="control-label"><i class="icon-asterisk"></i> <?php echo JText::_('COM_CSTUDOMUS_DIRECCION&#
浏览 3提问于2014-03-05得票数 1
回答已采纳
我有两页
index.php
login.php
从index.php发出一个ajax调用并获取login.php
index.php：
<!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">
<hea
浏览 2提问于2013-04-18得票数 0
回答已采纳
我有以下代码，可以在鼠标悬停时将DIV block向下移动20px：
$('.outerDiv').mouseover(function()
{
$(this).animate({marginTop: "+=20px",},500);
});
$('.outerDiv').mouseout(function()
{
$(this).animate({marginTop: "-=20px",},500);
});
div中包含另一个div。问题是，当鼠标位于内部div上时，会发生鼠标输出
浏览 2提问于2012-02-09得票数 1
回答已采纳
我有一个带有一些子元素的元素。当鼠标离开父元素时，我想隐藏父元素及其子元素。我遇到的问题是，当我将鼠标悬停在任何一个子对象上时，mouseout事件都会被触发。防止这种情况的最好方法是什么？我真的希望只有当鼠标不在父对象或其任何子对象中时，事件才会触发。
浏览 0提问于2010-02-08得票数 4
回答已采纳
1回答
我在一个经常变化的span元素中有一个数字。我希望能够检测到这个数字的任何变化，并将该数字存储在一个变量中。
到目前为止，我已经尝试过了：
var x = $('#mynum').text();
但是，这段代码不会检测到任何更改-它只在页面首次加载时获取该值。
我也尝试过这个：
$('#mynum').bind('change',function(){
alert('wahoo!'); });
然而，我甚至不能让它发出警报。
检测变化并在变量发生变化时将数字存储在变量中的最佳方法是什么？
浏览 4提问于2012-11-24得票数 3
回答已采纳
我有一个工具提示函数，在2个元素上有一个mouseout事件。这两个元素是子-父元素(一个元素变成另一个元素)。
在这个事件中，我需要检查鼠标光标是否在这两个元素之外。我该怎么做呢？
浏览 2提问于2010-07-09得票数 2
回答已采纳
标记如下所示。
<span id="spnMenuContainer" class="Menu">
<div id="divContainer" class="SubMenu">
<div id="BtnResubmit" class="basicbutton">Resubmit</div>
</div>
</span>
我在我的项目中有一些jquery代码
浏览 0提问于2015-08-19得票数 0
2回答
列表项和jquery
、、、、
我这里有这样的代码：
基本上，列表项的反应方式是添加的新项(复选框显示的那些项)应该像已经放置的列表项(单击时背景变化的项)。伯爵也应该上升。我不知道为什么我现在的方法不能工作，因为它的编写方式与其他代码相同.
代码：
HTML：
<div class='navbar navbar-fixed-bottom'>
<div class='col-lg-3 col-offset-2 pull-left'>
<form class="navbar-form pull-left
浏览 6提问于2013-07-30得票数 1
回答已采纳
我昨天在下面的代码中发现了一个潜在的jQuery错误：
$(document).ready(function() {
$('.likedLink').click(function(){
return false;
});
$('.likes').click(function(){
var id = $(this).attr('id');
var currentLike = id;
id = id.replace('p','&#
浏览 0提问于2011-08-16得票数 0
回答已采纳
3回答
插入/删除平衡
、、
当我单击按钮时，我想在p标签中添加一个div标签，当我点击一个p标签时，我也想删除我点击的p标签。
这是我的Jquery：
$('#ajou').click(function(){
alert( $('#skill').val());
$('#skills').append('<p>'+$('#skill').val()+'</p>');
});
$("p").click(function(){
$(this).remove();
}
浏览 3提问于2015-11-04得票数 0
回答已采纳
我有一个动态生成的列表，然后单击项目并将index()传递给另一个函数。
问题是这个列表是动态填充的，当我执行click事件时，我的代码没有响应。但是，如果我将两个静态li元素添加到列表中，除了动态填充的元素之外，这些静态元素也可以工作。这很奇怪。
下面是一些代码：
这将动态创建列表：
function SetOpenRecentURL( openRecentURL ) {
$('#recentProjectsId').append('<li>' + openRecentURL + '</li>')
}
这是要传递I
浏览 0提问于2013-01-20得票数 6
回答已采纳
1回答
我有两个类和一个使用其中一个类的函数
$('.div-image').click(function(){ // image zoom
$('#image').attr("src",img_src);
$('.div-image').attr('class','div-image-big');
});
和类似如下的html：
<div class="div-image">
<div id="wrapp
浏览 2提问于2012-11-14得票数 2
回答已采纳
我写了这段代码
$(document).on("click", "#tasksTable tr", function(e) {
var taskId = this.id;
var chkBoxCompleted = $(this).find('input:checkbox:first');
var chkBoxNotRequired = $(this).find('input:checkbox:last');
chkBoxCompleted.on('click
浏览 3提问于2014-05-28得票数 0
回答已采纳
我正在尝试根据用户提供的数字添加输入框。在我的addexercise()被调用之前，jquery函数工作得很好，但是在被调用之后它就不再工作了。
编辑:基本上，在addexercise()执行之后，当我单击"textbox“类的某些内容时，我的jquery函数就不再工作了。在addexercise()执行之前，它工作得很好。我不明白为什么它会坏掉。
这是我的addworkout.js文件
$(document).ready(function () {
$(".textbox").click (function () {
alert('
浏览 3提问于2012-06-25得票数 0
回答已采纳
实现点击class="click-enable"的td时，分别打印该td中数字的整数和小数部分。(尝试使用原生js实现，并考虑兼容性)
<table id="list">
<tr>
<td class="click-enable">1.1</td>
<td>1.2</td>
<td class="click-enable"
浏览 309提问于2019-09-02
因此，我有一个jquery函数，它在单击'ajaxsubnote‘类时执行一些操作
$('.ajaxsubnote').click(function(){
//do something....
})
但是用户可以通过jquery动态添加'ajaxsubnote‘类的元素。我的问题是，这些动态添加的元素，当被单击时，似乎不会调用上面的函数，而最初在DOM上的元素调用...
有什么办法可以解决这个问题吗？
浏览 1提问于2012-10-27得票数 0
回答已采纳
1回答
从这个中，我了解了如何为下面的代码片段设置动态id -
<c:forEach var="food" varStatus="i" items="${selectedIngredientsList}">
<c:set var="foodInfo" value="${food.foodItemId}"/>
<ul>
<li id="??"><c:out value="${food.
浏览 0提问于2014-11-10得票数 1
回答已采纳
即使在触摸设备上，我的页面也需要键盘控制。我放置了一个按钮元素，它聚焦于一个INPUT元素。这样一来，软键盘就出现了。
$('button').click(function() {
$(this).next().focus();
});
但是只要.keypress元素具有焦点，就不会在Chrome for Android上触发$(Document) INPUT ()。
$(document).keypress(function(e) {
var char = (typeof e.which == "number") ? e.which : e.keyCo
浏览 2提问于2014-02-10得票数 0
1回答
我有一个菜单，当我点击一个按钮时，它应该在移动单元上滑动，但是它已经不再工作了，因为我做了它，所以菜单和按钮是通过AJAX添加的，而不是直接在标记中添加的。
下面是代码：
检查当前屏幕(现在是窗口)大小，并调用抓取文件的函数：
var windowWidth = $(window).width(); //Will be screen.width later, using window for testing
if (windowWidth < 550) {
getPhpFile('mobilemenu', '#main-nav-container
浏览 2提问于2014-12-04得票数 1
回答已采纳
1回答
我有两种不同的身份证。来自名为id=“H+currentRow+”的ID (+currentRow+是当前行)的自动增量(使用jquery)。另一个对PHP执行ajax请求，将表单附加到id="Z#"(#将取决于数据库中的ID )。
我已经这样做了：
$(document).ready(function(){
$("input").change(function(){
var sum=0;
$("[id^=H]").each(function(){
sum=sum+(+parseInt(this.value));
}
浏览 2提问于2014-08-14得票数 0
回答已采纳
我想知道，使用jquery选择器是否可以将事件绑定到元素上，而不能绑定到它的子元素上。实际上，我有两个div，一个在绝对位置，我想在两个div上检测相同的事件，但是如果事件发生在顶级div的一个子节点上(我的意思是，我想检测事件是否在顶div的透明部分，就好像它发生在较低的div上)。
例如，在这里，#桌面和#应用程序是一个相同的固定宽度和高度，我想检测一个事件：#桌面，或#应用程序，但不是在.stuff上
<div id="desktop">
</div>
<div id="apps">
<div clas
浏览 1提问于2011-07-05得票数 8
回答已采纳
3回答
我想在ajax调用动态创建的元素上绑定一个事件。有些元素已经存在，当页面加载时，事件将与它们绑定。但是，当ajax调用后创建新元素时，新元素就失去了绑定。
我搜索并找到了一个很好的解决方案。
在这个问题中，"Jason“给出了两个解决方案来解决这个问题。
第二个解决方案是使用on方法，但它对我不起作用
第一种方法起作用，但也存在一些问题。
这是他提出的第一个解决方案
"1)封装“绑定”代码，并在页面加载和相关元素被添加回页面后立即调用它。例如：
$(document).ready(function(){
// bind event handlers wh
浏览 2提问于2018-08-21得票数 2
回答已采纳
在我的jQueryMobile应用程序中，我使用滑块作为应用程序的搜索部分。当滑块打开，用户在搜索面板中输入"word to search“时，查找结果的列表视图将以以下格式打印出来：
<li><a id='$id'>***search result***</a></li>
它是从php搜索文件中加载的。单击列表视图的这一部分时，我需要触发onClick函数重定向到另一个页面并创建变量。但是这个onClick触发器并没有被选中。
这是带有搜索init的面板：
<div data-role="panel"
浏览 1提问于2013-02-03得票数 1
回答已采纳
jQuery(".location a").click(function()
{
var data="type=loc&data="+jQuery(this).attr('name');
jQuery.ajax({
type: "POST",
url: "<?php echo home_url( '/' );?>wp-content/plugins/
浏览 0提问于2012-01-16得票数 0
当单击“更改密码”按钮时，我正在尝试将密码行转换为输入字段。我已经使用Jquery完成了一半的工作。所以我已经这样做了，这样当你点击“更改密码”时，输入字段就会被添加。同样，当他们点击“上一步”时，会显示原始状态。如果你查看代码，你会注意到在点击“上一步”之后，你不能再点击“修改密码”，jquery就不能工作了。对此有解决方案吗？
另外，我使用了jquery 'replaceWidth'，有没有更好的方法呢？我在我的Jquery中放了很多html，但我不确定这是否是最好的方式。
请看一看！
$("#change").click(function () {
浏览 3提问于2018-11-09得票数 0
我遇到了一个奇怪的问题，切换按钮的可见性似乎会影响在该按钮上调用click事件的次数。
如果我使用：$('button').on('click'...)来点击按钮，只要我在点击它之前已经完成了整个页面的加载，就只会发生一次点击事件。相反，如果我通过AJAX加载包含按钮的页面片段，然后单击按钮，则on()函数将触发多个单击事件，每次以这种方式加载页面时都会添加一个事件。
我可以通过使用$('button').one('click', ...来限制这些多次点击事件的触发，但是我想知道这是不是太黑客了，而且首先修复导致多次点击事件触发的
浏览 2提问于2012-04-29得票数 1
回答已采纳
1回答
我有一个表，在这个表中，我使用class="shift“将所有元素绑定到一个单击函数。
现在，由于我还需要在元素的一部分上使用另一个单击事件，所以当鼠标进入元素时，我希望解除对click事件的绑定，并在离开时重新绑定(用于一些触摸事件之类的)。
现在，我像这样绑着
$("table").on("touchstart mousedown",".shift", function(e){ ... })
但是，当我试图解除对特定元素的绑定时，假设它添加了一个“选择”的class=，以区分我使用的当前元素：
$("table").o
浏览 0提问于2016-07-09得票数 0
回答已采纳
我有一些jquery，它向脚本发出ajax请求并返回一些json结果。然后解析这些结果，并创建一个小图片库。然后将其添加到我的表单中。所有这些都能完美地工作……我的问题是，我正在尝试触发图像的事件，以便当您单击图像时，我可以做一些进一步的处理……但我就是不能让onclick工作...
如果有人有任何建议，我将不胜感激。
$('.imgSel').click(function()
{
alert("I WORK!!!!");
});
$("#mydiv").change(function(){
{
var url = "a
浏览 0提问于2012-08-02得票数 4
回答已采纳
1回答
我有个小片段。
<div contenteditable="true">
<img src="/img/logo.png">
</div>
我需要知道图像什么时候被删除，在现实世界的应用程序中，它更多的是在div中。
完成此操作的一种方法是使用jQuery，然后查看映像的父对象。当它被移除时，父对象就消失了，但这是一个好的方法吗？也许它存在一些被引发的事件？
我已经创建了这个小示例
浏览 0提问于2012-03-14得票数 0
5回答
我有外部文件，它生成复选框列表。这个文件是通过jquery加载的。我希望复选框单击并更新它的父div。
html
<div id="testiContent"></div>
checkbox.php
<div class="alert alert-info"><input type='checkbox' class='groupid' value='1'>1</div>
<div class="alert alert-info">
浏览 3提问于2017-07-19得票数 2
回答已采纳
我有一个嵌套在dataTable中的子dataTable。子表中的单元格具有输入类型数字字段，我希望检测字段的更改并获取新值。但是，我无法捕获更改事件。 输入字段具有如下类： <td><input type='number' class='edit_detect' name='input_field' value=1</td> 我使用类检测字段的变化，如下所示： $(".edit_detect").on('change keyup input', function(event){
浏览 23提问于2019-02-16得票数 0
回答已采纳
我有一个包含大量子div的div(大约4k-5k!)。每个子对象都附加了一个'mousedown'和'mouseup'事件。
我是否应该将这些事件附加到父事件一次，然后使用$(e.target)选择子事件？是否会有任何性能优势，如果有，为什么？
谢谢!
浏览 0提问于2012-04-05得票数 3
回答已采纳
1回答
我有一个动态创建的表，在每一行中都有一个按钮可以清除该行。该按钮在第一行运行良好，但在下面的行中不执行任何操作。要排除此问题，我将按钮设置为在单击时发出警报，但只有第一个按钮正在注册。
我已经将按钮更改为ID和类，但这似乎也不起任何作用。
以下是代码：
//dynamically create 4 rows
$(document).ready(function(){
var rowsAdd = $('#addTable tbody >tr');
var rA = rowsAdd.length;
while (rA<5) {
$('#addT
浏览 0提问于2018-07-11得票数 0
回答已采纳
我正在为我的网站制作一个小工具提示功能。
我做得很好：(在项目悬停时，检查是否存在气泡并显示它。)如果没有，则发出请求，追加buble，然后显示它)
$('.profileIcon').hover(function(){
var u = $(this);
var url = $(this).find('a').attr('href')+' #intro_usuario';
if($(this).find('.nube').length>0){
$(this).find
浏览 7提问于2012-03-02得票数 0
回答已采纳
我有一个Vue的问题，我有一个运行良好的@click的代码，但我也想添加键盘处理程序。代码如下： <section v-else class="row controls">
<div class="small-12 columns">
<button @click="playerAttack" @keyup.a="playerAttack" id="attack">
ATTACK
</butt
浏览 22提问于2019-02-12得票数 0
回答已采纳
2回答
我有一些初始隐藏的html代码片段。
<p style="float: left; position: relative; left: 130px; top: 80px; display: none;" id="homehref">
<a href="" style="color: white;">Home Page</a>
</p>
我在mouseover上用jQuery.show()显示它，在mouseout上用jQuery.hide()再次隐藏它；尽管当我把鼠标
浏览 1提问于2010-11-11得票数 1
回答已采纳
我正在制作一个商店目录，并且产品超文本标记语言是通过$(Document).ready( $.AJAX ())上的函数请求生成的。
$.ajax({
url: "../includes/geracatalogo.php",
method: "post",
data: {tipos: tipos, categorias: categorias, pagina: pagina},
success: function(html){
$("#produtos").empty();
$("#produtos&
浏览 0提问于2013-04-18得票数 0
回答已采纳
3回答
Jquery选择器在追加后不工作
、、、、
我有一个我调用的php脚本，它以一种可以直接插入容器或主体并只工作的方式返回html (E.X.'<image id="trolleyLogoEdge" class="pictureFrame party" src="tipsyTrixy.png" >')。将此文本附加到div后，选择器$('#pictureFrame > img:first')将无法工作。我不使用事件处理程序或任何东西，所以我不知道我为什么会有问题。当我在div中没有任何操作的情况下，我的代码工作得很好，所以我假设这一定是一个选
浏览 0提问于2013-12-17得票数 1
回答已采纳
1回答
好的，我正在尝试设置一个onClick事件，并在图片上设置一个jQuery，在左击它之后，在另一个选项卡上打开它。但是看起来，因为有图像，所以我的脚本无法工作。即使有了令人敬畏的，当页面有AJAX‘’ed的内容时，大多数情况下它都能拯救我，我也无法实现我想要的。
请检查我的代码如下：
// ==UserScript==
// @include https://revista*.globo.com/*.html
// @version 1.0
// @require https://code.jquery.com/jquery-2.2.3.min.js
// @requi
浏览 0提问于2019-08-01得票数 1
1回答
我遇到了一个小的机械区别的全视图菜单和移动视图菜单(使用相同的ul>li>a结构)。在移动视图中，菜单会隐藏，直到将.showMe类添加到其父div。没有问题，但是当我尝试使用选择器链中的.showMe来选择子菜单时(为了只在移动模式下执行jQuery操作)，脚本中断和依赖的操作永远不会发生。
所讨论的选择代码块在这里：
$('.showMe .menu-item-has-children > a').click(function(event){
// prevent default link behavior
if (!($(this).s
浏览 0提问于2014-03-21得票数 0
回答已采纳
我正在使用xui js作为移动web应用程序。Xui js不支持像jquery $("#selector").live()那样的实时事件。我想在jquery live上写一些东西。
jquery如何处理事件委托？
谢谢您抽时间见我
Mac
浏览 0提问于2011-07-27得票数 2
回答已采纳
我有一个母版页，加载内容到一个div的基础上，链接被点击。为此，我使用jQuery为某些锚点添加了一个单击处理程序：
<div id="nav">
<a href="somepage.html">
...
</div>
<div id="content"/>
<script type="text/javascript">
$(document).ready(function() {
$('#nav a, #footer a').cl
浏览 2提问于2012-10-27得票数 2
回答已采纳
我编写了一系列ajax函数，从php文件中获取数据。问题之一是将函数重定向到php文件以获取数据，但不返回到html页面插入数据。
在本例中，下面的代码是从php文件中获取一个表
var display_results = $("#display_results").val();
var url3 = "../server/insert_tests.php?analyses=";
$.ajax({
type: "GET",
url: url3 + display_results,
浏览 0提问于2019-01-17得票数 1
回答已采纳
考虑到事件触发器上的这两个jquery
$(document).on("click", "a[data-trigger='colorbox']",function(e){
$("a[data-trigger='colorbox']").on("click",function(e){
在使用第一个颜色框之前，我不得不点击两次锚标签。对于随后的点击，它不需要第二次点击来触发。但是对于第二个，颜色盒是在第一次点击的时候触发的。这两者有什么区别吗？
函数的内容如下
e.preventDefault();
浏览 4提问于2013-04-29得票数 3
3回答
我有一个脚本，它将附加到我的web应用程序中的两个 places。一个是列表项，另一个是HTML表单上的隐藏字段(我在PHP服务文件中处理数据)。
但是，如果用户单击'x‘图标，那么所有具有相同ID的元素都会被删除。
我很清楚如何做到这一点，但是下面的脚本甚至没有记录ID。.control块给了我这个问题。#add代码块成功地追加了HTML。
我漏掉了什么明显的东西吗？
$("#add").click(function() {
// RENDER LIST
var playerList = ""; //
playerList +
浏览 7提问于2016-05-16得票数 0
回答已采纳
我使用的是一个插件，它使用jquery创建一个手风琴。然而，我的jquery函数在dom被操作和我在函数中的div id被创建之前就已经运行了。这是我的函数。
jQuery('#_Offer_Something').click(function(){
if( !confirm('Delete?') ) { //show confirm dialog
return false; //do nothing if cancel is clicked (prevent the browser from following click
浏览 0提问于2012-04-21得票数 0
回答已采纳
1回答
jQuery not和类
、、、
我有两个锚链接(a.selector)，当单击其中一个链接时，它有一个类应用于它的“活动箭头”，单击还从另一个锚中移除同名类，并将不透明度降低到0.2。
然后，当用户悬停在没有“活动箭头”的锚上时，我想要有一个淡出效果，这样当鼠标进入时，它就会完全不透明，当鼠标发出时，它会返回到0.2。
我遇到的问题是，.not和：似乎不像预期的那样工作，但是如果我在悬停时单击锚，就会应用‘活动箭头’类，但是当鼠标发出声音时，透明度再次下降到0.2，即使应用了‘活动箭头’类。另外，悬停也不适用于另一个已经删除了“活动箭头”的链接。
这是一个很难解释的问题，所以这里有一些希望有所帮助的代码。
*//If a.s
浏览 3提问于2010-05-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
