javascript - 辅助 onClick 事件不起作用

Question

默认情况下，页面上有 3 个点击事件(蓝色 X、蓝色 +、灰色 X)。每个人都会打开一个模式框。

每个模式框都有一个按钮。其中两个模态框，一个用于蓝色 X，一个用于蓝色 +，内部都有功能按钮。当我单击这些附加单击事件各自的按钮时，控制台消息将显示。我单击模式中的蓝色 X 或蓝色 + 按钮，然后收到控制台日志消息。好的。但这对灰色 X 不起作用。

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

remPostConfirm

此按钮不起作用的代码是:

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 来加载此模式，那么在“删除”按钮上，您将不会像其他两个按钮那样收到控制台日志消息(蓝色 X 和蓝色 +)。

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

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

抱歉，JS 包含在 HTML 中，如果我将其分开，我将无法使示例正常工作。如果您想在对我投反对票之前帮助我完成这项工作，那就太好了。谢谢。

感谢您的帮助。和平。

Answer 1

您在 showRemPost 中遇到两个问题。

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

其次，在使用 .html() 创建按钮之前绑定(bind)点击处理程序。因此，当您创建按钮时，它没有单击处理程序。您需要更改订单。不需要 .off()，因为全新的元素不会有点击处理程序。或者，您可以使用事件委托(delegate)。或者您可以像其他对话框一样执行此操作，但不覆盖原始 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();
    }
  }