Jquery .on( "click" ) 到 span 在 Firefox 中不起作用，但在 Firefox Dev 中工作

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

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之间有不同的行为吗？

当我检查常规 firefox中的元素时，我可以看到事件已附加到它（我的警报（）），但似乎并未在此处触发

感谢任何见解！谢谢！

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

上

您将点击处理程序连接到<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>

相关内容

最新更新

热门标签：