jQuery移动和href链接在一个表内不工作

jQuery mobile and href links inside a table not working

本文关键字：一个 工作 移动 href 链接 jQuery      更新时间：2023-09-26

我正在使用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>
我很感激你的帮助，谢谢!

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

这正是你要找的事件委托和还必须防止超链接的默认功能

考虑下面的代码片段:

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

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

相关文章：