javascript - jquery无法获取ajax数据？

Question

在文档加载时，我运行以下 ajax 脚本。

function LoadData() {             
  $.ajax({
    type: "GET",
    url: "display.php",             
    dataType: "html",                
    success: function(text){                    
        $("#responsecontainer").html(text); 
    }

});
}

这是从中提取数据的 PHP 脚本。是的，我知道它已经贬值并且很可能容易受到攻击。

<?php
include 'db.php';
$counter = 0;
echo '<table  class="table" id="tableShow">
<tr>
<td align=center><b>ID</b></td>
<td align=center><b>Name</b></td>
<td align=center><b>Quantity</b></td>
<td align=center><b>Price</b></td></td>
<td align=center><b>Description</b></td>
<td align=center><b>Edit Item</b></td>
';
$result = mysql_query("SELECT * from user ORDER BY `id` ASC");

while($data = mysql_fetch_row($result))
{   
    echo "<tr>";
    echo "<td align=center>$data[0]</td>";
    echo "<td align=center>$data[1]</td>";
    echo "<td align=center>$data[3]</td>";
    echo "<td align=center>$data[4]</td>";
    echo "<td align=center>$data[2]</td>";
    echo '<td align=center><a class="btn Edititem btn-info btn-small" id="'.++$counter.'">Test1</a></td>';
    echo "</tr>";
}
echo "</table>";

?>

如您所见，表格中的每一行都有一个按钮。 <a class="btn Edititem btn-info btn-small" id="'.++$counter.'">Test1</a></td>

然后我就有了这个脚本。

  $(".Edititem").click(function () 
    {
    $('#Edit').modal('show');
      $("#updateResults").click(function (){
        $.ajax({                                      
          url: 'api.php',        
          data: "id="+ $(this).find('a').attr('id'),
          dataType: 'json',    
          success: function(data)
          { var id = data[0]; 
            var name = data[1];
            var desc = data[2];
            var quant = data[3];
            var price = data[4];
            $('#inner-title').html(name);
            $('#itemid').val(id);
            $('#Name').val(name);
            $('#quant').val(quant);
            $('#price').val(price);
            $('#desc').val(desc);
            $('#Edit').modal('hide');
            $('#success').alert();
          },
          error: function(){$("#failure").alert();}       
        }); 
      });
  }); 

似乎从 PHP 脚本中提取的 html 对于 jQuery 来说是不可见的。例如，当您单击其中一个按钮时，它应该启动我的页面中的模式，但是，它不会发生，而且我也没有收到控制台错误。但是如果我只是将按钮插入 #responsecontainer像这样:

<div id="responsecontainer">
  <a class="btn Edititem btn-info btn-small" id="'.++$counter.'">Test1</a>
</div>

jQuery 可以找到它，并且模式会启动吗？

这里出了什么问题？

Answer 1

我建议您使用.on() jQuery函数。

.on() | jQuery API Documentation

考虑以下脚本更新:

$("#responsecontainer").on("click", ".Edititem", function() {
    $('#Edit').modal('show');
    $("#updateResults").click(function() {
        $.ajax({
            url: 'api.php',
            data: "id=" + $(this).find('a').attr('id'),
            dataType: 'json',
            success: function(data)
            {
                var id = data[0];
                var name = data[1];
                var desc = data[2];
                var quant = data[3];
                var price = data[4];
                $('#inner-title').html(name);
                $('#itemid').val(id);
                $('#Name').val(name);
                $('#quant').val(quant);
                $('#price').val(price);
                $('#desc').val(desc);
                $('#Edit').modal('hide');
                $('#success').alert();
            },
            error: function() {
                $("#failure").alert();
            }
        });
    });
});