Question

我正在制作一个带有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函数不止一次发生。它应该只发生一次每次点击。有什么想法吗？

Answer 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>

Answer 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()优化搜索。如果您将标签类型放在它前面，它就无法进行优化。

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

2 个答案: