Question

以编程方式发送click事件似乎是一个永恒的问题。关于这一点有很多SO问题，但我所看到的解决方案似乎都没有在我的真实代码中工作。我有一个工作 fiddle 来解决我的问题。

我正在运行Visual Studio 2017，C＃，。Net 4.6.1，jQuery 3.3.1。我从NuGet获得jQuery，bootstrap等，但开始认为可能存在打包问题，所以我已经切换到CDNJS。我正在做一个非常忙碌的＆＃34;树＆＃34;选择小部件。

我的雇主有一个空间使用数据库：谁在或可以访问哪些房间;广场和其他房间特征。我想要一个允许empolyee-X请求访问一个或多个房间的小部件。房间是＆＃34;控制＆＃34;由小组组长，实验室经理等。这意味着我有一个类似的层次结构：

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

小部件显示每个＆＃34;目录＆＃34;作为ul直到你到达房间号码。房间号码是按钮。每个按钮与html / css go完全相同。当然，文本值是不同的。如果用户已占用或以其他方式访问房间，然后按钮颜色不同，则存在视觉差异。

按钮有一个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和li元素还有ul个处理程序可以调整并向上传递计数。

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

我有一段代码构建按钮

    //
    // 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();成语有效，但不在上面的代码中。

我错过了什么？

Answer 1

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

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

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

所以你应该使用button。

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

button.trigger("click");

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

jQuery .click（）在小提琴中起作用但在实际代码中不起作用

1 个答案: