Question

默认情况下，我在页面上有3个点击事件（蓝色X，蓝色+，灰色X）。每个人都打开一个模态框。

每个模态框都有一个按钮。两个模态框，一个用于蓝色X，另一个用于蓝色+，两者都有内部功能按钮。单击各自按钮时，控制台消息会显示这两个额外的单击事件。我单击模式中的按钮为蓝色X或蓝色+，我得到控制台日志消息。好。但这对灰色X不起作用。

另一个第三个模态框确实打开，但里面的按钮不起作用。此按钮的id =

remPostConfirm

这个按钮的代码没有＆＃39;工作是：

showRemPost = function(id, url, lname) {
    console.log("remPost1");
    if (isAuth) {
        $('#remPostConfirm').off('click').on("click", function(e) {
            e.preventDefault();
            console.log("remPost2");
        });
        $('#remPostModal .description').html('<p>Post: ' + url + '</p><p>From List: ' + lname + '</p><div  id="remListConfirm" class="mini ui button">Remove</div >');
        $('#remPostModal').modal('show');
    } else {
        deniedAccess();
    }
}

其他两个有效的按钮，基本上都有相同的代码。

我迷失了为什么这不再起作用，因为这个第三个模态按钮曾经工作过。如果您尝试单击灰色X以加载此模式，则在＆＃34;删除＆＃34;按钮，你不会得到像其他两个给出的控制台日志消息（蓝色X和蓝色+）。

这是一个jsfiddle示例供您测试并查看。

https://jsfiddle.net/qrmrfrhj/16/

很抱歉，JS包含在HTML中，如果我在下面将其分开，我就无法使用该示例。如果你想在帮助我之前帮助我完成工作，那就太好了。感谢。

感谢您的帮助。和平。

Answer 1

showRemPost中有两个问题。

首先，在您添加到#remPostModal的HTML中，您有id="remListConfirm"，但您在#remPostConfirm上添加了点击处理程序。 remListConfirm已使用remListModal，您不应在此处复制。

其次，在使用.html()创建按钮之前绑定点击处理程序。因此，当您创建按钮时，它没有单击处理程序。您需要更改订单。因为一个全新的元素没有点击处理程序，所以不需要.off()。或者，您可以使用事件委派。或者你可以像其他对话框那样做，你不会覆盖原始HTML中的按钮。

  showRemPost = function(id, url, lname) {
    console.log("remPost1");
    if (isAuth) {
      $('#remPostModal .description').html('<p>Post: ' + url + '</p><p>From List: ' + lname + '</p><div  id="remPostConfirm" class="mini ui button">Remove</div >');
      $('#remPostConfirm').on("click", function(e) {
        e.preventDefault();
        console.log("remPost2");
      });

      $('#remPostModal').modal('show');
    } else {
      deniedAccess();
    }
  }

Answer 2

您有两个问题：

＆＃34;删除＆＃34;的ID弹出窗口中的按钮实际上是remListConfirm，而不是remPostConfirm
在将按钮添加到DOM之前，您正在创建事件。这意味着当JS查找具有id＆＃39; remListConfirm＆＃39;的元素时，它将找不到任何内容，因此不会将事件附加到任何内容。

解决方案是将JS中的id更改为remListConfirm，并将.html行移动到创建单击事件的行上方。这是固定的部分：

                 if (isAuth) {
                        $('#remPostModal .description').html('<p>Post: ' + url + '</p><p>From List: ' + lname + '</p><div  id="remListConfirm" class="mini ui button">Remove</div >');
                    $('#remListConfirm').off('click').on("click", function(e) {
                        e.preventDefault();
                        console.log("remPost2");
                    });

                    $('#remPostModal').modal('show');
                } else {
                    deniedAccess();
                }
            }

辅助onClick事件无效

2 个答案: