Question

我正在使用jQuery mobile并使用ajax填充表，其中一个字段是我正在分配类的href，在屏幕上显示警报，并且它不会触发任何内容：< / p>

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

双引号：

$("#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

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

Answer 2

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

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

请考虑以下代码段：

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

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

2 个答案: