跨度的 Jquery .on("click") 在 Firefox 中不起作用，但在 Firefox Dev 中起作用答案

【问题标题】：Jquery .on("click") to a span isn't working in Firefox but works in Firefox Dev跨度的 Jquery .on("click") 在 Firefox 中不起作用，但在 Firefox Dev 中起作用
【发布时间】：2019-02-15 08:58:26
【问题描述】：

所以我有一个有趣的案例，我有一个表格，其中包含单击按钮删除行的选项。

var each_row = $("<div>").addClass("multiple-group-fields");
var remove_button = $("<button>").addClass("classes").appendTo(each_row);
var delete_icon = $("<span>").addClass("moreClasses");
remove_button.append(delete_icon);

 delete_icon.on("click",{row:each_row}, function(event) {
    alert("clicked");
})

$("body").append(each_row);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <p>Example</p>
</body>

var remove_button = $("<button>").addClass("myClasses").appendTo(each_row);
var delete_icon = $("<span>").addClass("moreClasses");
remove_button.append(delete_icon);

delete_icon.on("click", {row:row_each}, function(event) {
      alert("clicked");
})

但这似乎不适用于常规 Firefox。事实上，当我将鼠标悬停在按钮上时，光标也不是指针。

但是，当我切换到 Firefox 开发者版时，我对此没有任何问题。 Firefox Dev 和普通的旧 Firefox 之间有不同的行为吗？

当我在 regular Firefox 中检查元素时，我可以看到附加了一个事件（我的 alert()），但它似乎没有在此处触发

希望有任何见解！谢谢！

注意：这适用于所有其他浏览器（Chrome、IE 等）。我的开发 FF 在 v66 上，而我的常规 FF 在 v65 上

【问题讨论】：

在发表此评论时，FF（正常）的版本为 65，但如果您 look through the developer releases，它们的版本最高为 67。您使用的是哪个版本？您应该查看发行说明，看看是否有任何相关更改可以解释您的问题。
@crazymatt 这是一个很好的观点。我的（正常）FF 目前在 65，而我的 FF（开发）在 66.0b1
你能创建一个minimal reproducible example 来演示这个问题吗？
您将点击处理程序添加到跨度，而不是按钮。跨度的大小为零，因此您无法单击它。
会更整洁 -> jsfiddle.net/d1qvstyo

标签： jquery firefox

【解决方案1】：

您将点击处理程序附加到<span> 而不是<button>。 span 中没有文字，所以无法点击。

如果我在跨度中放一些东西，您的示例在 Chrome 中有效：

var each_row = $("<div>").addClass("multiple-group-fields");
var remove_button = $("<button>").addClass("classes").appendTo(each_row);
var delete_icon = $("<span>").addClass("moreClasses").text("X");
remove_button.append(delete_icon);

 delete_icon.on("click",{row:each_row}, function(event) {
    alert("clicked");
})

$("body").append(each_row);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <p>Example</p>
</body>

或者将处理程序附加到按钮上。

var each_row = $("<div>").addClass("multiple-group-fields");
var remove_button = $("<button>").addClass("classes").appendTo(each_row);
var delete_icon = $("<span>").addClass("moreClasses");
remove_button.append(delete_icon);

 remove_button.on("click",{row:each_row}, function(event) {
    alert("clicked");
})

$("body").append(each_row);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <p>Example</p>
</body>

但要使其在 Firefox 65 中运行，我需要两者。当 span 中没有任何内容时，我什至看不到 FF 中的按钮。

我想 Mozilla 开发人员认为这是一个错误，并在新版本中修复了它。

var each_row = $("<div>").addClass("multiple-group-fields");
var remove_button = $("<button>").addClass("classes").appendTo(each_row);
var delete_icon = $("<span>").addClass("moreClasses").text("X");
remove_button.append(delete_icon);

 remove_button.on("click",{row:each_row}, function(event) {
    alert("clicked");
})

$("body").append(each_row);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <p>Example</p>
</body>

【讨论】：