Link not working after AJAX request

Question

I'm having a minor but rather annoying issue with a webpage I'm making. So I have a link that, when clicked, makes an AJAX request to a PHP script (the link sends a hidden input value, if that matters). It works fine and it works as I expect, but then if I try to click the link again, it doesn't do anything. I have to refresh the page in order for it to work again, and I prefer to not have to do this.

Link: <a name='delete-link' href='#'>Delete</a>

JavaScript:

    $("a[name='delete-link']").click(function(e){
        e.preventDefault();
        var ID = $(this).parents("ul").find("input[name='delete-identifier']").val();

        $.ajax({
            type: 'POST', 
            url: '../ajax.php',
            data: {delete: 'true', delete_id: ID},
            success: function(response){
                $("#result").html(response).fadeIn(500).delay(5000).fadeOut(500);
                $("div[name='update']").load("test.php #update");
            }
        })
    })

The only code in the #update div is this PHP code which echoes a table displaying users:

<?php
    if ($rs){
        $user_table = "<table class='table table-bordered table-condensed table-hover table-striped'><th>Action</th>";
        $user_table .= "<tr><th>Name</th><th>Privilege ID</th></tr>";
        while ($user = $rs->fetch_array(MYSQL_ASSOC)){
            $user_table .= "<td>". $rank['RankName'] ."</td><td>". $user['PrivilegeID'] ."</td><td>";
            $user_table .= "<td><div class='btn-group'>
                                  <button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown' aria-expanded='false'>
                                    Action <span class='caret'></span>
                                  </button>
                                  <ul class='dropdown-menu' role='menu'>
                                    <input type='hidden' name='delete-identifier' value='". $user['ID'] ."'>
                                    <li><a name='delete-link' href=''>Delete</a></li>
                                  </ul>
                                </div>
                            </td><tr>";
        }
        $user_table .= "</table>";
        echo($user_table);
    }
?>

Any ideas?

Link: `Delete`, Javascript: `$("a[name='delete-link']").click(function(e){ e.preventDefault(); var ID = $(this).parents("ul").find("input[name='delete-identifier']").val(); $.ajax({ type: 'POST', url: '../ajax.php', data: {delete: 'true', delete_id: RankID}, success: function(response){ $("#result").html(response).fadeIn(500).delay(5000).fadeOut(500); $("div[name='update']").load("ranks.php #update"); } }) })` — Cludas18, May 30 '15 at 19:50
I have made an edit to the question, just waiting for Cludas to accept the edit. — NewToJS, May 30 '15 at 19:54
by any chance that div with name update contains above a tag? — Chaitanya Gadkari, May 30 '15 at 20:02
Duplicate Question: [jQuery click not working for dynamically created items](http://stackoverflow.com/questions/9484295/jquery-click-not-working-for-dynamically-created-items) — Yogi, May 30 '15 at 21:35

Chaitanya Gadkari · Accepted Answer · 2015-05-30T21:07:05.910

5

after ajax you are updating the div, .click() do not work on dynamic loaded html. Use .on()

$(document).on("click","a[name='delete-link']",function(e){
    e.preventDefault();
    var ID = $(this).closest("ul").find("input[name='delete-identifier']").val();

    $.ajax({
        type: 'POST', 
        url: '../ajax.php',
        data: {delete: 'true', delete_id: ID},
        success: function(response){
            $("#result").html(response).fadeIn(500).delay(5000).fadeOut(500);
            $("#update").load("test.php");
        }
    })
})

In place of $(document) you can use Id selector of parent of dynamic content as $('#updateDivParentId')

edited May 30 '15 at 21:07

answered May 30 '15 at 20:04

Chaitanya Gadkari

2,669
4
30
54

Still having the same issue – Cludas18 May 30 '15 at 20:09
you have `` tag in dynamic zone right? click working 1st time and then not working directs to that way. any errors you see on console? any other dependant events you have like click? – Chaitanya Gadkari May 30 '15 at 20:12
No errors. I don't have any other "click" events on this page. I tried removing the # from href on the link, and that made it where I don't have to refresh, but I have to click it twice, so i guess if nothing works, I'll live with that – Cludas18 May 30 '15 at 20:17
can you post html with div id update. and what is it with clicking twice? – Chaitanya Gadkari May 30 '15 at 20:26
i do not understand php code, but I can see #update div changes after ajax hence `click()` wont work, it works on static dom. I dont know why `on()` is not woring for you. also 1 thing to note use `closest('ul')` instead of `parents('ul')`, parents() tranverse the whole dom, closest stops after it finds 1st match. Also are there multiple div with name update? if not replaced `load()` and updated answer. – Chaitanya Gadkari May 30 '15 at 21:05
My bad, I was too quick to say this didn't work. I did not see that you did `$(document).on("click","a[name='delete-link']",function(e){`, as opposed to me trying `$("a[name='delete-rank-link']").on("click", function(e){`. This worked just fine, my bad! – Cludas18 May 30 '15 at 21:11
$ should contain the static dom element, it could have also been $('#update') as it will be always there, after that on binds click on the next parameter, which is tag with specific name here... – Chaitanya Gadkari May 30 '15 at 21:15

Link not working after AJAX request

1 Answers1