动态生成的子元素单击事件在Chorme中工作但在Firefox中不起作用

Question

HTML：

<button type="button" data-id="2" data-patternname="P1" data-ownwidth="58.00" data-toggle="tooltip" title="" class="btn btn-primary" data-markername="M1" data-original-title="M1"><a class="aRemoveMarker">x</a><span class="spnMarkerVal">37%</span></button>

JavaScript：

$(document).on('click', '.aRemoveMarker', function (e) {
        e.preventDefault();
        e.stopPropagation();
        for (var i = 0; i < markers.length; i++) {
            if ($(this).parent().data("id") == markers[i].id) {
                markers.splice(i, 1);
            }
        }
        $(this).parent().parent().html('<span class="button-checkbox"><button type="button" data-type="Marker" '+
            'data-patternname="' + $(this).parent().data("patternname") + '" class="btn" data-color="info">' + $(this).parent().find('.spnMarkerVal').html() + '</button><input type="checkbox" data-id="' + $(this).parent().data("id") + '" data-patternname="' + $(this).parent().data("patternname") + '" data-ownwidth="' + $(this).parent().data("ownwidth") + '" class="hidden chkPattern" /></span>');
        bindCheckBox();     
    })

单击Chorme浏览器中触发的子元素事件，但不在FireFox浏览器中触发。它会被激活父元素而不是子元素。