表格内的jQuery mobile和href链接不起作用

Question

我正在使用 jQuery mobile 并使用 ajax 填充表格，其中一个字段是我分配一个类的 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");
});

表格已正确填充，但单击时未显示警报。如果我在表格外添加一个按钮，它可以工作：

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

感谢您的帮助，谢谢！

Answer 1

因为您的链接是动态添加到 DOM 中的，所以点击事件将不起作用。

这正是您正在寻找的 event Delegation 和 还得防止超链接的默认功能

考虑以下sn-p：

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