jquery无法获取ajaxed数据？

Question

On document load I run the following ajax script.

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

});
}

Here is the PHP script it pulls the data from. Yes I know it's depreciated and most likely vunerable to attack.

<?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>";

?>

As you can see, within the table it has a button for each row. <a class="btn Edititem btn-info btn-small" id="'.++$counter.'">Test1</a></td>

I then have this script.

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

It seems that the html thats pulled from the PHP script, is invisible to jQuery. For example, when you click on one of the buttons, it should launch the modal I have within my page, however, it don't happen and I get no console errors either. But if I just insert the button into the #responsecontainer like so:

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

jQuery can find it, and the modal launches?

What is wrong here?

Answer 1

I recommend you to use .on() jQuery function.

.on() | jQuery API Documentation

Consider following script update:

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