Question

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

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

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

记录号码名镇等

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

我提供了一些示例代码，其中包含两个文件，jQuery.php和db.php，db.php现在只是模拟数据库查找（粗略我知道），以便更容易显示我的代码和什么我想做。

如果你运行jQuery.php并输入一个城镇（谢菲尔德，罗瑟勒姆），然后点击“获取数据”，你会得到一个精确的结果列表，如果你只是点击获取数据就得到了所有的结果，你会看到每一个结果作为一个4挖ID号，我想在这里发生的是当你点击那个号码然后只在另一个div容器中加载该记录，但由于我已阅读但不明白的动态内容它无法正常工作

你会看到我在页面顶部做了一个参考编号1005的例子，如果点击它，它会加载那个唯一的记录，但是我无法让它与在表中。

jquery.php

    <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".click").click(function() {
            var recordid = $(this).attr("id");
            $('#2').load("db.php?id=" +recordid);
        });

        $("#get").click(function() {
            var town = $("#town").val();
            $('#1').load("db.php?town="+town
            );
        });
    });
</script>

OUTSIDE OF DYNAMIC HTML RECORD ID : - <a class = 'click' id = '1005'>1005</a><br>
<br>
Town <input type="textbox" id="town" ><br>
<button id="get">Get Data</button>
<br>


----<br>
*<div id="1" name='records_all'></div>
----<br>
*<div id="2" name='record_unique'></div>
----<br>

db.php（用于模拟数据库查找的粗略代码，仅用于解决此问题）

    <?php
$id = $_GET['id'];
$town = $_GET['town'];

echo "<pre>";

$data[]= array('id' => '1001', 'town' => 'sheffield', 'street' => 'national av', 'name' => 'neil');
$data[]= array('id' => '1002', 'town' => 'rotherham', 'street' => 'maple drive', 'name' => 'steve');
$data[]= array('id' => '1003', 'town' => 'leeds', 'street' => 'poplar drive', 'name' => 'john');
$data[]= array('id' => '1004', 'town' => 'rotherham', 'street' => 'exchange st', 'name' => 'claire');
$data[]= array('id' => '1005', 'town' => 'sheffield', 'street' => 'main street', 'name' => 'sarah');
$data[]= array('id' => '1006', 'town' => 'rotherham', 'street' => 'holderness rd', 'name' => 'jo');



if ($id) {
    foreach ((array)$data as $key => $value) {
        if ($data[$key]['id'] == $id) {
            echo $data[$key]['id']."<br>";
            echo $data[$key]['name']."<br>";
            echo $data[$key]['street']."<br>";
            echo $data[$key]['town']."<br>";
        }
    }
} else {
    if ($town) {
        foreach ((array)$data as $key => $value) {
            if ($data[$key]['town'] == $town) {
                $link = "<a class = 'click' id = '{$data[$key]['id']}'>{$data[$key]['id']}</a>";
                echo "{$link} {$data[$key]['town']}  {$data[$key]['name']}<br>";
            }
        }
    } else {
        foreach ((array)$data as $key => $value) {
                $link = "<a class = 'click' id = '{$data[$key]['id']}'>{$data[$key]['id']}</a>";
                echo "{$link} {$data[$key]['town']}  {$data[$key]['name']}<br>";
        }
    }
}

Answer 1

如果元素在jQuery选择时不在DOM中，则不会按照编写代码的方式添加事件。但是，您可以像这样编写代码

$(document).ready(function() {
    $(document).on('click', '.click', function() { //this is the only thing that changed
        var recordid = $(this).attr("id");
        $('#2').load("db.php?id=" +recordid);
    });

    $("#get").click(function() {
        var town = $("#town").val();
        $('#1').load("db.php?town="+town
        );
    });
});

此代码应完全取代您的javascript。它通过单击类创建文档中所有未来元素的实时监听器。

Answer 2

您需要使用事件委派来解决此问题。在“直接和委派活动”部分下查看.on here的jQuery文档

尝试类似

的内容

$('#1').on('click', '.click', function() {
    var recordid = $(this).attr("id");
    $('#2').load("db.php?id=" +recordid);
});

只要运行jQuery事件绑定时#1元素在DOM中，这将起作用。基本上你将click事件绑定到#1元素，而不是在加载后将它绑定到元素.jQuery文档很好地解释了这一点。

动态jQuery html元素，添加事件处理程序？

2 个答案: