php - jQuery - 在 Mysql 中搜索结果，然后在表格中显示，而且每条记录都有一个点击链接

Question

我花了几个小时试图解决一个 jQuery 经验非常有限的问题，但这对我没有帮助。

我想使用一些输入字段然后使用提交按钮在数据库中搜索结果列表，当您单击提交时，值将传递给返回结果的 .php 脚本，这些结果显示在表格中在一个完美的 div 容器中。

然后，每条记录都显示在表格中它自己的行中，其中的列代表不同的数据。

记录号 姓名 小镇

我想要的是记录号是某种点击链接，当点击时，它会传递该值并执行不同的 mysql 请求，在不同的 div 容器中更详细地显示该唯一记录数据。这是我无法开始工作的部分，因为我认为它与 BINDING 或 .ON 有关，我真的一无所知或不了解它是如何工作的，因为我的经验非常有限。

<p></p>

<pre><code>    <script type="text/javascript">
        $(document).ready(function() {
            $(".click").click(function() {
                var name = $("#name").val();
                var name = $(this).attr("id");
                $('#2').load("mysqlrequest_unique.php?recordid=" +name);
            });

            $("#get").click(function() {
                var sales_record_number     = "sales_record_number="    + $("#sales_record_number").val() + "&";
                var item_id                 = "item_id="                + $("#item_id").val() + "&";
                var user_id                 = "user_id="                + $("#user_id").val() + "&";
                var buyer_fullname          = "buyer_fullname="         + $("#buyer_fullname").val() + "&";
                var sale_date               = "sale_date="              + $("#sale_date").val() + "&";
                var paypal_transaction_id   = "paypal_transaction_id="  + $("#paypal_transaction_id").val() + "&";
                var ship_to_zip             = "ship_to_zip="            + $("#ship_to_zip").val() + "&";
                var item_title              = "item_title="             + $("#item_title").val() + "&";

                $('#1').load("mysqlrequest_all.php?"+sales_record_number+item_id+user_id+buyer_fullname+sale_date+paypal_transaction_id+ship_to_zip+item_title, function(){
                    var name = $("#name").val();
                    var name = $(this).attr("id");
                    $('#2').load("mysqlrequest_unique.php?recordid=" +name);
                }
                );
            });
        });
    </script>

<div id="1" name='container_display_all'></div>
<div id="2" name='container_display_unique'></div>
</code></pre>

<p></p>

这是表中每一行的内容，当它包含在使用 jQuery 生成的 html 中时不起作用

<a class = 'click' id = '19496'>19496</a>

Answer 1

这不起作用，因为您正在动态添加 html 元素，并且事件处理程序未添加到动态添加的元素中。

$(document).ready(...) 仅在文档​​加载时运行。因此，如果所有具有 click 类的元素都被动态添加，这段代码 $(".click") (在 $(document. ready(...) ) 将返回一个不包含元素的 jquery 对象(因为当前 DOM 中没有类 click)。

然后您的元素(具有 click 类)被添加到 DOM，但它们没有处理程序。您需要做的是在添加这些对象时为它们设置处理程序。

所以改变这一行:

$('#1').load("mysqlrequest_all.php?"+sales_record_number+item_id+user_id+buyer_fullname+sale_date+paypal_transaction_id+ship_to_zip+item_title);

为此:

$('#1').load("mysqlrequest_all.php?"+sales_record_number+item_id+user_id+buyer_fullname+sale_date+paypal_transaction_id+ship_to_zip+item_title, function(){
    $(".click").click(function() {
        var name = $("#name").val();
        var name = $(this).attr("id");
        $('#2').load("mysqlrequest_unique.php?recordid=" +name);
    });
}
);

一旦新的 html 加载到第一个 div 中，此代码将执行传递的函数，这将向新元素添加所需的处理程序。