Cant find a button after ajax load

Question

I have a bit of code that populates a table and in there are buttons, which loads performs a AJAX load. This works fine, its loads the content into a DIV called with id 'DIV1'. I cant seem to find any buttons when they are clicked iin that DIV1, they are lost in DOM tree i think.

The code I have to get the buttons which are in the original table called 'mainstuff' This works fine.

$(document).ready(function(){
    $(".mainstuff button").click(function(){
        $('#loader').show();
        status = $(this).attr("data-name");
        var new_url = "demo_text.php?job_id="+status;
        //alert(status);
        $("#div1").load(new_url);
    });
});

The AJAX load produces this :

echo "<table class='mainTable'>
<tbody>
<tr>
<td width='50%'><li>Pick up time : <B>".$new_date."</B></li><li>Pick up time : <B>".$p_time."</B></li><li>Pick up address : <B>".$p_address."</B></li><li>Destination address : <B>".$d_address."</B></li><li>Return date : <B>".$d_date_new."</B></li><li>Return time : <B>".$d_time."</B></li><li>Number of passengers : <B>".$pax."</B></li><li>Estimated distance : <B>".$est_dist."</B></li><li>Estimated time : <B>".$est_time."</B></li></td>
<td width='50%' id='description'><li>Purpose : <B>".$purpose."</B></li><li>Extra requirements : <B>".$list."</B></li><li>Notes : <B>".$notes."</B></li><li>Current bids : <B>12</B></li><li>Lowest bid : <B>£180</B></li><li>Your lowest bid : <B>£160</B></li><li>Make a new bid of : £<input id='bid_amount' type='text'><button id='identify_this_btn' data='".$job_id."' type='button' class='btn btn-bid'><span class='glyphicon glyphicon-pencil'></span> MAKE BID </button></li><div id='actions'><button type='button' class='btn btn-success' onclick='closedown()'><span class='glyphicon glyphicon-remove-circle'></span> CLOSE </button></div></td>
</tr>
</tbody>
</table>

I have tried this to do something when button is clicked but to no avail? WHat am I doing wrong?

$(document).ready(function(){
    $(".mainstuff div1 mainTable button").click(function(){
        alert("text");
    });
});

Any help would be greatly appreciated. Thank you

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Heretic Monkey, Aug 25 '18 at 12:59
Sorry it possibly is but as I did not know what that was, I was unlikely to enter it as previous search term! — wayneuk2, Aug 25 '18 at 13:06
Duplicate closure is not a bad thing. It's not a punishment. The duplicate is for others to find the answer when they enter search terms closer to your question than the duplicate. Your question serves as a signpost for others to find the answer they're looking for, and we can keep answers from being in multiple places. — Heretic Monkey, Aug 25 '18 at 13:09

score 2 · Accepted Answer · answered Aug 25 '18 at 12:38

You're selecting the wrong elements

Replace the selector ".mainstuff div1 mainTable button"
With "#div1 .mainTable button"

After that, you need to do event delegation since the content is dynamic

$(document).on("click", "#div1 .mainTable button", function(){
    alert("text");
});

Cant find a button after ajax load

1 Answers1