鼠标不适用于动态内容
Mouseenter not working for dynamic content
我写了一段代码,当鼠标移到特定元素时,我需要在其中触发一个功能。
以下代码适用于所有静态
$("table td").on("mouseenter",function(){
console.log("mouse entered")
});
但对于所有动态CCD_ 1事件,即使我使用以下代码,也不会触发
$("table td").on("mouseenter",".editcolumn",function(){
console.log("mouse entered")
});
知道如何让它发挥作用吗。我使用的是jQuery 1.11
我知道我刚刚发表了评论,但我想我会给你看一个例子:
HTML:
<table id="tablee" cellspacing="0">
<thead>
<tr class="tablehead">
<th>This</th>
<th>is</th>
<th>a</th>
<th>table</th>
<th>header</th>
<th>and</th>
<th>stuff</th>
<th>though</th>
</tr>
</thead>
<tr class="append">
<td class="edit-column">asdf</td>
<td class="edit-column">qwer</td>
<td class="edit-column">zxcv</td>
<td class="edit-column">rtyu</td>
<td class="edit-column">tyui</td>
<td class="edit-column">dfgh</td>
<td class="edit-column">dfgh</td>
<td class="edit-column">wert</td>
</tr>
<!-- ... -->
</table>
<br/>
<br/>
<input type="button" class="add-column" value="Add Column" />
Javascript:
$(function() {
$('.add-column').click(function() {
$('.append').append("<td class='edit-column'>iueo</td>");
$('.tablehead').append("<th>Mo columns</th>");
});
/* vvv - this */
$("#tablee").on('mouseenter', '.edit-column', function() {
/* ^^^ should be children or a child of this */
$(this).css('background-color', 'yellow');
});
});
这是一把小提琴
这个问题的答案可以更好地解释委托事件。
对于添加或删除的动态元素,我也面临着类似的问题。在这种情况下,您可以创建动态元素,并将事件处理程序附加到它们的属性上,即在您的情况下,可以将所需的操作放入由属性事件处理程序调用的函数中:
应该是这样的:
Javascript:
function whenMouseEnters() {
// perform some operations
}
Html:
<td onmouseenter="whenMouseEnters()">
如果表在DOM加载时可用,您可以使用类editColumn为td编写delgated事件,如下所示:
$("table").on("mouseenter",".editcolumn",function(){
console.log("mouse entered")
});
相关文章:
- JQueryhide()不适用于Mozzilla,但适用于Chrome
- PHP中的setcookie仅适用于localhost
- html5 drawImage适用于firefox,而不是chrome
- 提供“;onClick"适用于iPad(触摸屏)和桌面用户的默认功能
- jQuery表单验证适用于Mozilla和Internet Explorer,但不适用于Chrome或Safari
- 动态路径用于流星/铁路由器
- ResolveUrl是否适用于././也
- Firebase updateChildValues适用于IOS,但不适用于Web和Android
- JavaScript警报适用于int,但不适用于string
- SQLite插件适用于Mac和Windows,但不适用于手机上的Safari
- Regex Replace仅适用于Last Match
- window.onload适用于aspx页面,但不适用于普通html
- 来自mysql的动态值用于html代码点火器视图中的图形
- Jquery Ajax POST不工作.适用于GET
- 画布上的自定义字体仅适用于safari
- 动态修改CSS-适用于IE9,但不适用于Chrome和Firefox
- 动态选择列表上的单击事件仅适用于 FF
- Iframe设置动态高度仅适用于chrome
- 动态菜单的Ajax调用适用于first
- 如何在firefox中动态点击一个href链接?预期的方法只适用于IE