时间戳

首页 > 解决方案 > jQuery .click() 在小提琴中有效，但在实际代码中无效

jquery - jQuery .click() 在小提琴中有效，但在实际代码中无效

问题描述

以编程方式触发click事件似乎是一个长期存在的问题。有很多关于这个的问题，但我见过的解决方案似乎都没有在我的真实代码中工作。我有一个工作 小提琴可以解决我的问题。

我正在运行 Visual Studio 2017、C#、.Net 4.6.1、jQuery 3.3.1。我从 NuGet 获取 jQuery、bootstrap 等，但开始认为可能存在打包问题，因此我已切换到 CDNJS。我正在研究一种非常忙碌的“树”选择小部件。

我的雇主有一个空间使用数据库：谁在或可以访问哪些房间；方形照片和其他房间特征。我想要一个允许 employee-X 请求访问一个或多个房间的小部件。房间由组长、实验室经理等“控制”。这意味着我有一个类似的层次结构：

    |-- Group_1
    |   |-- ConferenceRooms
    |   |   |-- 3252
    |   |   `-- 3374
    |   |-- Labs
    |   |   |-- 1014
    |   |   `-- 4915
    |   `-- Offices
    |       |-- 4919
    |       `-- 7352
    |-- Group_2
    |   |-- ConferenceRooms
    |   |   |-- 1618
    |   |   `-- 7276
    |   `-- Labs
    |       |-- 1333
    |       `-- 5106
    |-- Group_3
    |   |-- ConferenceRooms
    |   |   |-- 1167
    |   |   `-- 9145
    |   `-- Labs
    |       `-- 5789
    |-- Group_4
    |   |-- Labs
    |   |   |-- 1867
    |   |   |-- 2418
    |   |   |-- 7912
    |   |   `-- 8853
    |   `-- Offices
    |       |-- 1328
    |       `-- 4084
    `-- Group_5
        |-- Labs
        |   |-- 6179
        |   |-- 6605
        |   `-- 7015
        `-- Offices
            |-- 1686
            |-- 3418
            |-- 3542
            `-- 5092

该小部件将每个“目录”显示为一个ul，直到您获得房间号。房间号是按钮。就 html/css 而言，每个按钮都是相同的。当然，文本值是不同的。如果用户已经占据或以其他方式可以进入房间，那么就会有视觉上的差异，然后按钮颜色就会不同。

按钮有一个onClick处理程序

    $("button.roomId").on("click", function(event) {
        event.stopPropagation();

        var count = 0;

        //
        // toggle the selected button
        if ($(this).is("button.disabled")) {
            $(this).removeClass("disabled");

            count = -1;
        } else {
            $(this).addClass("disabled");

            count = 1;
        }

        //
        // put the count in the parent li and trigger onChange in the parent
        $(this).parent()
            .trigger("change", [count]);
    });

这通过小部件层次结构传递并保持向上计数。还有用于和元素onChange的处理程序来调整和向上传递计数。liul

当我第一次为特定用户构建小部件时，我会知道该用户可以访问哪些空间以及他们占用哪些房间。这意味着我想在装饰相关按钮后触发按钮点击。

有一段代码我在其中构建按钮

    //
    // create the per group, per roomType room buttons
    for (let i = 0; i < data[groupName][roomType].length; i++) {
        const roomId = data[groupName][roomType][i];
        var match = false;

        //
        // if this roomId matches any of this user's rooms set
        // "matched"
        Object.keys(sessionCookie.myData).sort().forEach(
            function(key) {
                const re = new RegExp(`^${roomId} \\\(`);

                if (re.test(key)) {
                    match = true;
                    return false;
                }

                return true;
            });

        //
        // create the li and the button
        const room = $("<li/>").addClass("list-no-bullet")
            .addClass("d-inline-block")
            .attr("data-key", roomId)
            .appendTo(roomList);

        const button = $("<button/>").addClass("roomId")
            .addClass("itemName")
            .addClass("btn")
            .addClass("btn-sm")
            .addClass("btn-secondary")
            .addClass("mr-1")
            .addClass("p-0")
            .append(roomId)
            .appendTo(room);

        //
        // if this roomId matched this user's list of room then 
        // decorste the button and fire the clicke event
        if (match) {
            $(button).removeClass("btn-secondary")
                .addClass("btn-dark")
                .append(" Occupant");

            $(button)[0].click();
        }
    }

在简化的小提琴中，$(button)[0].click();成语有效，但在上面的代码中无效。

我错过了什么？

标签： jquery.net

解决方案

正如评论中提到的，创建一个 jQuery 对象而不使用它是没有用的。

此外，button由于这一行，已经是一个 jQuery 对象：

const button = $("<button/>").addClass("roomId")

所以你应该使用button.

然后，要在其上触发点击事件，请使用.trigger(). 那将是：

button.trigger("click");

评论中还提到你必须定义一个点击处理程序......;）
我以这种方式更新了你的小提琴。

推荐阅读