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

Answer 2

这是因为加载文档时尚未加载元素。

您可以尝试以下操作。这会对Jquery进行后期绑定。在此处阅读更多https://api.jquery.com/on/

  $(document).on('click', '.Edititem', function (e) 
    {
    e.preventDefault();
    $('#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();}       
        }); 
      });
  });

ajaxed数据无法通过jquery获取？

2 个答案: