Question

我桌子的一部分看起来像这样：

<td data-item="Tier1">
     <a class="infolnk" href="#">DRAFT</a>
</td>
<td data-item="Tier2">
     <a class="deletelnk" href="#"></a>
     <a class="editlnk" href="#"></a>
     <a class="infolnk" href="#">DRAFT</a>
</td>
<td data-item="Tier3">
     <a class="deletelnk" href="#"></a>
     <a class="editlnk" href="#"></a>
     <a class="infolnk" href="#">DRAFT</a>
</td>

为了处理on-click -events，我已经写了以下功能：

$(document).ready(function () {
     Console.log("loading Tiers");
     LoadTiers();
     Console.log("Tiers have been loaded, loading Eventhandlers");
     SetTableEventHandlers();
}


function SetTableEventHandlers() {

    $(".deletelnk").click(function ()
    { _delete($(this)); });

    $(".infolnk").click(function ()
    { _getInfo($(this)); });
}

function _delete(lnkClicked)
{
   alert("delete clicked");
   ....
}

function _getInfo(lnkClicked)
{
   alert("Info clicked");
   ....
}

然而只有delete似乎有效。我没有收到来自_getInfo的任何提醒。谁能明白为什么？

注意：在html页面上声明了带有class="deletelnk"的标记，动态添加了class="infolnk"。然而，事件处理程序的设置在之后动态添加。

Answer 1

动态添加元素的事件绑定可以使用.on完成，所以改变

$(".infolnk").click(function ()
    { _getInfo($(this)); });

到

 $("table tr").on("click",".infolnk",function ()
    { _getInfo($(this)); });

Answer 2

您缺少关闭代码

<a class="deletelnk" href="#"></a>
<a class="editlnk" href="#"></a>
<a class="infolnk" href="#">DRAFT</a>

Answer 3

您可以使用

$(".deletelnk").click(function (){
    _delete($(this)); 
});

$(".infolnk").click(function (){
    _getInfo($(this)); 
});

function _delete(lnkClicked){
    alert("delete clicked");
}

function _getInfo(lnkClicked){
    alert("Info clicked");
}

JQuery：OnClick不工作

3 个答案: