Question

所以我有一个有趣的情况，我有一个表，该表带有单击按钮以删除行的选项。

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 Developer Edition时，我对此没有任何问题。 Firefox开发人员和常规旧Firefox之间有不同的行为吗？

当我在 regular Firefox中检查该元素时，可以看到一个事件已附加到该事件（我的alert（）），但似乎未在此处触发该事件

不胜感激！谢谢！

注意：这在所有其他浏览器（Chrome，IE等）上都可以正常运行。我的开发FF在v66上，而我的常规FF在v65上

Answer 1

您要将点击处理程序附加到<span>而不是<button>上。跨度中没有文本，因此无法单击它。

如果我在范围内放一些东西，您的示例将在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中正常工作，我需要同时执行。当范围中没有任何内容时，我什至看不到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>

jQuery .on（“ click”）到一个范围在Firefox中不起作用，但在Firefox Dev中起作用

1 个答案: