Не могу найти кнопку после загрузки AJAX

Question

У меня есть немного кода, который заполняет таблицу, и есть кнопки, загрузка которых выполняет загрузку AJAX.Это прекрасно работает, загружает контент в DIV, который называется с идентификатором 'DIV1'.Кажется, я не могу найти какие-либо кнопки, когда они нажимаются в DIV1, они потеряны в дереве DOM, я думаю.

Код, который я должен получить для кнопок, которые находятся в исходной таблице, называемой 'mainstuff'. Это работаетнормально.

$(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);
    });
});

Загрузка AJAX производит это:

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>

Я пытался что-то сделать, когда нажата кнопка, но безрезультатно?Что я делаю не так?

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

Любая помощь будет принята с благодарностью.Спасибо

Answer 1

Вы выбираете неправильные элементы

Заменить селектор ".mainstuff div1 mainTable button"
С "#div1 .mainTable button"

После этого вам необходимо выполнить делегирование событий, так как содержимое является динамическим

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