Question

我有一个表的主体，它通过ASP.NET MVC中的局部视图动态地将ajax附加到表元素。局部视图看起来像这样......

@model IEnumerable<Plan>
@{
    Layout = null;    
}
@foreach (var plan in Model)
{
    <tr>
        <td>
            <a href="#" class="jumpToMyPlans">@plan.Name</a>
        </td>
    </tr>
}

...并附加到主视图中静态的表元素...

<table id="myPlanTable">
</table>

我正在尝试为每个锚元素注册一个onclick事件（目前有很多），使用像这样的jQuery on()函数......

jQuery('#myPlanTable').on('click', 'tbody > tr:gt(0) > td > a.jumpToMyPlans', function () {
    console.log('click');
});

...但事件拒绝开火。我已经在浏览器控制台中检查了DOM遍历，它肯定是正确的，并返回预期的DOM集。

Answer 1

试试这个：

jQuery('#myPlanTable').on('click', 'tbody > tr:gt(0) > td > a.jumpToMyPlans', function () {
     console.log('click');
});

1）将a.jumpToMyActionPlans更改为a.jumpToMyPlans

2）添加);以关闭点击处理程序

Answer 2

这个选择陈述对我有用....

jQuery('#myPlanTable').on('click', 'tr:gt(0) > td > a.jumpToMyPlans', function () {
        console.log('click');
});

我认为问题是在选择器中指定tbody，我猜这可能也是动态生成的，但不是我，我猜是通过浏览器或其他东西。

Answer 3

我对此进行了测试，点击工作：

$(document).on('click', '#myPlanTable a.jumpToMyPlans' , function () {
    alert('click');
});

the html i used to test it was:

<table id="myPlanTable">
     <tr>
        <td>
            <a href="#" class="jumpToMyPlans">PAPA</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="#" class="jumpToMyPlans">Sapo</a>
        </td>
    </tr>
</table>

希望这能帮到你！

Answer 4

当部分视图通过ajax或jquery呈现时，然后绑定Jquery事件使用“live”如下：

 jQuery('#myPlanTable').live('click', 'tbody > tr:gt(0) > td > a.jumpToMyPlans', function () {

        console.log('click');
    });

jQuery点击事件未触发动态添加的内容

4 个答案: