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

Question

I'm working with jQuery mobile and populating a table by using ajax, one of the fields is a href that I'm assigning a class to, to present an alert in the screen, and it does not fire anything:

I have tried by using the double quotes and single quotes without success:

Double quotes:

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

Single quotes:

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

jQuery method:

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

The table is populated correctly but the alert is not showing up when clicked. If I add a button outside the table, it works:

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

I would appreciate your help, thanks!

Answer 1

$(".linkTest").click() won't apply to any dynamically created elements added subsequently. Either do $(".linkTest").click() after the dynamic content is added or bind the event to a containing element eg $('body').on('click', '.linkTest', function() { });

Answer 2

Because your link is dynamically added to DOM, so click event will not work.

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

Consider following snippet:

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