CODEWITHSUNDEEP
phpjavascriptjqueryhtmlajax
user2637317
user2637317

Reputation:

jQuery Selection does not work

In my HTML document I have got a table with an empty table body, which gets automatically filled by jQuery when the document is completely loaded. The table body is generated by a PHP script, jQuery gets the content with a simple GET request.

Here is my PHP code...

<?php

// ...
// ...
// Just take a look at the following two lines,
// the other code is not important in this case.
while ($tableDataRow = $tableData->fetch_assoc())
    echo '<tr><td>'. $tableDataRow['id']. '</td><td>'. $tableDataRow['name']. '</td><td><a href="#" class="delete-row" data-id="'. $tableDataRow['id']. '">Delete</a></td></tr>';

?>

The output could be...

<tr><td>1</td><td>Nadine</td><td><a href="#" class="delete-row" data-id="1">Delete</a></td></tr><tr><td>2</td><td>Nicole</td><td><a href="#" class="delete-row" data-id="2">Delete</a></td></tr>

Everything works perfect, the only problem is that jQuery does not react if any click event occurs. My jQuery code looks like this...

$(document).ready(function() {
    $(".delete-row").click(function(event) { // "a[class=delete-row]" does not work, too. But "*" works for every element, even for the links?!
        event.preventDefault();
        alert("You clicked on that link!")
    });
});

Upvotes: 0

Views: 88

Answers (4)

James Donnelly
James Donnelly

Reputation: 128781

.click() makes use of jQuery's bind() method, which basically takes a snapshot of the DOM. In this case, that snapshot would be generated on document ready.

As your PHP code is dynamically added to the page, this will not be included in the document ready DOM snapshot. For this reason, jQuery has an on() method which can be used instead:

$("table").on('click', '.delete-row', function() { ... });

This is known as event delegation.

Upvotes: 2

AbstractChaos
AbstractChaos

Reputation: 4211

Sounds like the issue is due to your elements being added to the DOM after the page has loaded (IE. via ajax request), this would mean that $(".delete-row").click(function(event) {}); would fail as the element was missing when registered the way round this is to use on.

$('.parentElement').on('click','.delete-row',function() {
   event.preventDefault();
  alert("You clicked on that link!");
});

.parentElement would be an element that is parent of your ajax added html but not dynamically added itself.

Upvotes: 1

Julien Grenier
Julien Grenier

Reputation: 3394

Events are bind at the generation of the page but your table is attached after so you should use something like "on" or whatever is the latest event bind method of jQuery instead of "click"

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

Use delegation:

$(document).ready(function() {
    $("#mytable").on("click",".delete-row",function(event) { // "a[class=delete-row]" does not work, too. But "*" works for every element, even for the links?!
        event.preventDefault();
        alert("You clicked on that link!")
    });
});

Upvotes: 2

Related Questions