Q:

Jquery .on("click") to a span isn't working in Firefox but works in Firefox Dev

So I have an interesting case where I have a table with options to click a button to delete a row.

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");
})

but this doesn't seem to work in regular Firefox. In fact, when I hover over the button, the cursor isn't a pointer as well.
However, when I switched over to Firefox Developer Edition, I had no problems with this whatsoever. Is there a different behavior between Firefox Dev and regular old Firefox? 
When I inspect the element in regular Firefox, I can see that an event is attached to it (my alert()) but it doesn't seem to be triggered here
Would appreciate any insight! Thanks!
Note: This works fine on all other browsers (Chrome, IE, etc). My dev FF is on v66 while my regular FF is on v65

A:

You're attaching the click handler to the <span> rather than the <button>. There's no text in the span, so there's no way to click on it.
Your example works in Chrome if I put something in the span:

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>

Or attach the handler to the button instead.

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>

But to make it work in Firefox 65, I need to do both. When there's nothing in the span, I can't even see the button in FF.
I suppose the Mozilla developers consider this a bug, and they fixed it in the new version.

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>

