如何在jquery中访问动态创建的表格单元格?

9 浏览
0 Comments

如何在jquery中访问动态创建的表格单元格?

我有一段代码,在其中循环遍历页面上的所有选择框,并将.hover事件绑定到它们上,以在鼠标悬停/离开时对它们的宽度进行微调。

这在页面加载完成后发生,并且工作得很好。

我的问题是,在初始循环之后,通过Ajax或DOM添加的任何选择框都不会绑定该事件。

我找到了这个插件(jQuery Live Query Plugin),但在将插件添加到我的页面中之前,我想看看是否有人知道如何使用jQuery直接或其他选项来解决这个问题。

0
0 Comments

问题的出现原因:用户想知道如何使用jQuery访问动态创建的表格单元格。

解决方法:用户提供了两种解决方法。第一种方法是使用纯JavaScript,不依赖任何库或插件。代码中使用了一个名为hasClass的函数,该函数用于判断元素是否包含指定的类名。通过添加事件监听器,当点击事件发生时,可以根据点击的元素的类名执行相应的操作。

第二种方法是使用更现代的JavaScript语法实现hasClass函数,并在事件监听器中使用该函数。此方法与第一种方法的原理相同,只是代码的语法稍有不同。

此外,用户还提供了一个jsfiddle的示例代码,其中包含了一个具有三个不同类名的div元素,以及一个点击事件监听器。当点击事件发生时,根据点击的元素的类名执行相应的操作。

最后,用户还提供了一些建议和讨论,包括使用Element.classList代替字符串分割来判断元素是否包含类名、使用事件冒泡来处理子元素的点击事件、直接循环遍历元素并添加事件监听器等。

0
0 Comments

问题的出现的原因:在jQuery 1.7之前,推荐的方法是使用live()来访问动态创建的表格单元格。然而,live()在1.7版本中被弃用,并在1.9版本中完全移除。因此,需要找到一种新的方法来访问动态创建的表格单元格。

解决方法:从jQuery 1.7开始,应该使用jQuery.fn.on方法,并填充选择器参数。这被称为事件委托,其工作原理如下:将事件附加到应该处理的元素的静态父元素(staticAncestors)上。每次事件在该元素或其后代元素上触发时,都会触发这个jQuery处理程序。处理程序然后检查触发事件的元素是否与选择器(dynamicChild)匹配。当有匹配时,执行自定义的处理函数。

具体代码如下:

$(staticAncestors).on(eventName, dynamicChild, function() {});

在上述代码中,如果页面动态创建了一个类名为dosomething的元素,你可以将事件绑定到一个已经存在的父元素上(这是问题的关键,你需要绑定到一个已经存在的元素,而不是动态内容),最简单的方法是使用document。代码如下:

$(document).on('mouseover mouseout', '.dosomething', function(){
    // 当鼠标在匹配'.dosomething'的元素上触发mouseover和mouseout事件时,执行相应的操作
});

以上解决方法还可以应用于其他任何在事件绑定时已经存在的父元素。例如:

$('.buttons').on('click', 'button', function(){
    // 当点击匹配的按钮时,执行相应的操作
});

了解更多关于事件委托的内容可以参考:learn.jquery.com/events/event-delegation。

虽然这种解决方法在jQuery 3和Firefox中仍然会出现错误,因为在清除HTML并重新创建后,事件会被触发两次。但至少在这个解决方法中多次提到了"事件委托",尽管它没有实际展示如何将事件委托给一个动态绑定的函数。

0
0 Comments

问题的原因是事件处理程序只能绑定到当前选中的元素上,即必须在代码调用.on()时页面上存在这些元素。因此,在下面的示例中,#dataTable tbody tr必须在生成代码之前存在。

解决方法是使用委托事件来附加事件处理程序,这样如果新的HTML被注入到页面中,也能够处理事件。委托事件的优势在于它们可以处理以后添加到文档中的后代元素的事件。例如,如果表格存在,但是行是通过代码动态添加的,可以使用以下代码来处理事件:

$("#dataTable tbody").on("click", "tr", function(event){
    console.log($(this).text());
});

除了能够处理尚未创建的后代元素上的事件之外,委托事件的另一个优势是当需要监视许多元素时,它们的开销可能更低。在一个具有1,000行的数据表的tbody中,第一个代码示例会将处理程序附加到1,000个元素上,而委托事件的方法只会将事件处理程序附加到一个元素上,即tbody,并且事件只需向上冒泡一级(从点击的trtbody)。

需要注意的是,委托事件对于SVG不起作用。

0