jQuery第一次点击被忽略？

问题描述

我将这段代码与 jQuery UI 一起使用

function ViewClient(RelationID) {
    console.log('entering');
    $('a[id^="contact_show"]').on('click',function (e) {
        console.log('clicking '+RelationID);
        ShowClientInfo(RelationID);
        $('#accordion').accordion({active: 2});
    });
}

用户单击以执行操作的链接如下所示（位于手风琴的面板 1 上）：

<a href="#" id="contact_show_204" onclick="ViewClient(204);">View Client</a>

这应该会关闭面板 1，并打开面板 2。

手风琴初始化如下：

$( "#accordion" ).accordion({
    active: false,heightStyle: "Content",collapsible: true
});

当我单击其中一个 ID 时，第一次单击总是被忽略（不显示正确的手风琴）。它只在第二次和以后的点击中显示正确的手风琴。 DOM 在我第一次点击时就准备好了。我不知道还要检查什么。有什么想法吗？

编辑：

我现在添加了console.log来输入函数并点击ViewClient()函数的元素，结果是每次点击，我都会收到日志消息“进入”，但点击只适用于第二次点击开始。奇怪的是，它似乎并没有“重置”事件：

entering

entering
clicking 204
clicking 206

entering
clicking 204
clicking 206
clicking 206

entering
clicking 204
clicking 206
clicking 206
clicking 206

请注意，第二次单击时，我单击了不同的 ID (206)。但是，如果我也单击原始 ID (204)，它也会做同样的事情。我尝试返回 false 和 preventDefault()。在我看来像是延迟的 DOM 更新？

解决方法

您使用的语法用于初始化手风琴。要更改现有手风琴的设置，您必须使用 option 方法（如果您想一次更改多个设置，则使用 options）。

$("#accordion").accordion(); // initialize accordion
$('a[id^="contact_show"]').on('click',function (e) {
    ShowClientInfo(RelationID);
    $('#accordion').accordion("option","active",2); // change the active pane
});

您已为同一个元素分配了两个点击处理程序。脚本中的一个和标记中的一个都在每次点击时触发。您需要单独初始化您的手风琴，并且您应该在 jQuery 单击处理程序中调用 ViewClient()。

jquery jquery-ui-accordion