javascript - ajax加载后找不到按钮

Question

我有一些填充表格的代码，其中有一些按钮，这些按钮加载执行 AJAX 加载。这工作正常，它将内容加载到一个名为“DIV1”的 DIV 中。当在 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按钮”
使用 “#div1 .mainTable 按钮”

之后，由于内容是动态的，您需要进行事件委托(delegate)

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