jQuery table 内的移动和 href 链接无效

Question

我正在使用 jQuery 移动设备并使用 ajax 填充 table，其中一个字段是我正在分配 class 的 href到，在屏幕上显示一个警报，它不触发任何东西：

我试过使用双引号和单引号都没有成功：

双引号：

$("#table1").append("<tr><td><a href='#' class='linkTest'>" + element.field1 + "</a></td><td>" + element.field2 + "</td><td>" + element.field3 + "</td></tr>");

单引号：

$("#table1").append('<tr><td><a href="#" class="linkTest">' + element.field1 + '</a></td><td>' + element.field2 + '</td><td>' + element.field3 + '</td></tr>');

jQuery方法：

$(".linkTest").click(function(){
    alert("It works");
});

table 已正确填充，但单击时未显示警报。如果我在 table 之外添加一个按钮，它会起作用：

<a href="#" class="linkTest"> TEST </a>

非常感谢您的帮助，谢谢！

Answer 1

$(".linkTest").click() 不适用于随后添加的任何动态创建的元素。在添加动态内容后执行 $(".linkTest").click() 或将事件绑定到包含元素，例如$('body').on('click', '.linkTest', function() { });

Answer 2

因为你的link是动态添加到DOM的，所以点击事件不会起作用。

This is exactly what you looking for event Delegation and also have to prevent default function of hyperlink

考虑以下代码段：

$("#table1").on('click','.linkTest', function(e){
    e.preventDefault();//for prevent default redirect
    alert("It works");
});

jQuery table 内的移动和 href 链接无效

jQuery mobile and href links inside a table not working

html

javascript

ajax

jquery

jquery-mobile