jQuery事件don'注入html时无法工作

jQuery events don't work when html is injected

本文关键字：html 工作 注入 事件 don jQuery      更新时间：2023-09-26

我有这样的东西：

function SetTableBehavior() {
    $(".displayData tr").hover(function(e) {
        $(this).children().addClass('displayDataMouseOver');
    }, function () {
        $(this).children().removeClass('displayDataMouseOver');
    });
    $(".displayData tr td").click(function(e) {
        var rowsSel = $(".displayData .displayDataRowSelected");
        for (var i = 0; i < rowsSel.length; i++) {
            var rowSel = rowsSel[i];
            $(rowSel).children().removeClass("displayDataRowSelected");
        }
        $(this).parent().addClass('displayDataRowSelected');
        var p = $(this).parent();
        p.children().addClass('displayDataRowSelected');
    });
}

当表的主体被注入时，既不悬停也不点击工作。如果我使用

$(".displayData tr td").live('click',function(e) {

单击事件有效，但

$(".displayData tr").live('hover',function(e) {

不起作用

有什么解决方案可以让悬停工作。谢谢

它似乎是这样工作的：

function SetTableBehavior() {
    $(".displayData tr").live('mouseenter', function (e) {
        $(this).children().addClass('displayDataMouseOver');
    }).live('mouseleave', function(e) {
        $(this).children().removeClass('displayDataMouseOver');
    });
    $(".displayData tr td").live('click',function(e) {
        var rowsSel = $(".displayData .displayDataRowSelected");
        for (var i = 0; i < rowsSel.length; i++) {
            var rowSel = rowsSel[i];
            $(rowSel).children().removeClass("displayDataRowSelected");
        }
        $(this).parent().addClass('displayDataRowSelected');
        var p = $(this).parent();
        p.children().addClass('displayDataRowSelected');
    });
}

$(".hoverme").live("mouseover mouseout", function(event) {
  if ( event.type == "mouseover" ) {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

从这里：http://api.jquery.com/live/

没有名为"悬停"的事件，因此您不能将其与live或bind一起使用。这只是jQuery为我们实现的一条"捷径"。

您不能将悬停与live一起使用。您必须将其拆分为两个独立的事件侦听器：一个用于mouseenter，另一个用于mouseleave。

此外，在您的情况下，您不需要live。使用性能更好的delegate：

$(".displayData").delegate('tr', 'mouseeneter',function(e) {
    $(this).children().addClass('displayDataMouseOver');
})
.delegate('tr', 'mouseleave',function(e) {
    $(this).children().removeClass('displayDataMouseOver');
});

hover(a, b)是mouseenter(a).mouseleave(b)的快捷方式(它们本身就是bind('mouseenter', a).bind('mouseleave', b)的快捷方式(，所以请尝试：

$(".displayData tr").live('mouseenter', function(e) { 
    // mouseenter handler
}).live('mouseleave', function (e) {
    // mouseleave handler    
});

有关更多信息，请参阅hover()和live()文档。

相关文章：