jQuery函数不止一次发生，为什么？答案

【问题标题】：jQuery function happens more than once, why?jQuery函数不止一次发生，为什么？
【发布时间】：2011-09-16 19:30:52
【问题描述】：

我正在制作一个中间有一个 div 的页面，其 id 为“devices_div”，如下所示：

<div id="devices_div"></div>

页面加载或表单提交时，会将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>

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>

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

问题是：当我提交表单并第二次单击链接时，它会添加两行。如果我提交表单并第三次单击链接，它会添加三行，等等。所以 jQuery 函数不止一次发生。每次点击应该只发生一次。有什么想法吗？

【问题讨论】：

标签： jquery ajax

【解决方案1】：

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

编辑：

另一种选择是修改脚本块以使用 .bind

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

然后将它移动到它所在文件的底部，下面

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

【讨论】：

将实时事件处理程序更改为绑定已修复。谢谢！事件处理程序不在父页面中的原因是因为我需要 after() 的内容根据正在加载的资源动态更改。

【解决方案2】：

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

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

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

要解决这个问题，您可以将该代码移动到您的主 JS 中，这样它就不是检索到的 html 的一部分，或者您可以将它留在检索到的 HTML 中并使用一个变量来保护它，该变量会跟踪它是否已经存在跑还是不跑。

此外，此选择器"#add_device" 比"a#add_device" 更有效，只要您不试图在<a> 标记之外的其他东西上避免#add_device，它就会给您相同的结果。一般来说，没有理由将标签类型放在 id 前面。 ID 在页面中是唯一的。如果您只使用 ID，那么 jQuery 可以使用 document.getElementById() 优化搜索。如果把标签类型放在前面，就不能优化那么多了。

【讨论】：