jQuery函数不止一次，为什么？ 我用一个div做一个页面，中间有一个ID“DedivsIddiv”，像这样：

加载页面或提交表单时，resource_table.php的内容将加载到div中：

<script>
    jQuery(document).ready(function()
    {
        jQuery("#devices_div").load("resource_table.php");

        jQuery("#form").submit(function(event)
        {
            event.preventDefault();

            var form = jQuery(this);

            jQuery.ajax({
                type: "POST",
                data: form.serialize(),
                url: form.attr("action"),
                success: function(data)
                {
                    jQuery("#devices_div").load("resource_table.php");
                }
            });
        });
    });
</script>

jQuery（文档）.ready（函数（）
{
jQuery（“#devices_div”）.load（“resource_table.php”）；
jQuery（“表单”）.submit（函数（事件）
{
event.preventDefault（）；
var form=jQuery（this）；
jQuery.ajax({
类型：“POST”，
数据：form.serialize（），
url:form.attr（“操作”），
成功：功能（数据）
{
jQuery（“#devices_div”）.load（“resource_table.php”）；
}
});
});
});

resource_table.php的内容包括：

<script>
    jQuery("a#add_device").live('click', function()
    {
        jQuery("table#devices tr:last").after("<tr><td>Test</td><td>Test</td></tr>");
    });
</script>

<table id="devices">
    <tr>
        <th>
            Name
        </th>
        <th>
            Xml Name
        </th>
    </tr>
</table>

<a id="add_device" href="#">Click here to add a device</a>

jQuery（“添加设备”）.live（'click'，function（）
{
jQuery（“table#devices tr:last”）.after（“TestTest”）；
});
名称
Xml名称

当我第一次单击id为“add_device”的链接时，它在表“devices”中添加了一行

---

问题是：当我提交表单并第二次单击链接时，它会添加两行。如果我提交表单并第三次单击链接，它会添加三行，以此类推，因此jQuery函数会多次出现。每次单击只能发生一次。有什么想法吗？

您正在多次绑定现场活动。尝试将live事件移动到父页面，而不是多次加载的页面

编辑：

另一个选项是修改脚本块以使用.bind

<script>
    jQuery("a#add_device").bind('click', function()
    {
        jQuery("table#devices tr:last").after("<tr><td>Test</td><td>Test</td></tr>");
    });
</script>

jQuery（“添加设备”）.bind（'click'，function（）
{
jQuery（“table#devices tr:last”）.after（“TestTest”）；
});

然后将其移动到其所在文件的底部，如下所示

<a id="add_device" href="#">Click here to add a device</a>

---

您正在多次绑定实时事件。尝试将live事件移动到父页面，而不是多次加载的页面

编辑：

另一个选项是修改脚本块以使用.bind

<script>
    jQuery("a#add_device").bind('click', function()
    {
        jQuery("table#devices tr:last").after("<tr><td>Test</td><td>Test</td></tr>");
    });
</script>

jQuery（“添加设备”）.bind（'click'，function（）
{
jQuery（“table#devices tr:last”）.after（“TestTest”）；
});

然后将其移动到其所在文件的底部，如下所示

<a id="add_device" href="#">Click here to add a device</a>

---

我猜这是因为每次执行此操作时，都会再次运行这行代码：

jQuery("a#add_device").live('click', function()

这将添加事件处理程序的新副本。因此，您最终得到了事件处理程序的多个副本，每个副本都在执行

要解决这个问题，您可以将该代码移动到主JS中，使其不是检索到的html的一部分，也可以将其保留在检索到的html中，并使用一个变量对其进行保护，该变量跟踪代码是否已经运行

---

此外，此选择器

“#添加设备”

比

“a#添加设备”

更有效，只要您不试图在

标记以外的其他对象上避免添加设备，就会得到相同的结果。通常，没有理由将标记类型放在id前面。id在页面中是唯一的。如果只使用ID，那么jQuery可以使用

document.getElementById（）

优化搜索。如果您将标记类型放在前面，它就无法进行太多优化。

我猜这是因为每次这样做时，您都会再次运行这一行代码：

jQuery("a#add_device").live('click', function()

这将添加事件处理程序的新副本。因此，您最终得到了事件处理程序的多个副本，每个副本都在执行

要解决这个问题，您可以将该代码移动到主JS中，使其不是检索到的html的一部分，也可以将其保留在检索到的html中，并使用一个变量对其进行保护，该变量跟踪代码是否已经运行

---

此外，此选择器

“#添加设备”

比

“a#添加设备”

更有效，只要您不试图在

标记以外的其他对象上避免添加设备，就会得到相同的结果。通常，没有理由将标记类型放在id前面。id在页面中是唯一的。如果只使用ID，那么jQuery可以使用

document.getElementById（）

优化搜索。如果将标记类型放在它前面，它就无法进行太多优化。

将live事件处理程序更改为绑定修复了它。谢谢事件处理程序不在父页面中的原因是，我需要after（）的内容根据正在加载的资源进行动态更改。将live事件处理程序更改为bind可修复此问题。谢谢事件处理程序不在父页面中的原因是，我需要after（）的内容根据正在加载的资源进行动态更改。