.replace not working in Firefox?

Question

JS

$(document).ready(function(){
    $(document).on('click', 'div[id^="button-"]', function(e){
        e.preventDefault();

        var elementId = event.target.id.replace(/\D/g,'');
        $(".content-wrapper-" + elementId).css("display","inline");
    });
});

HTML

<div id="button-1"></div>
<div id="button-2"></div>
<div id="button-3"></div>

<div class="content-wrapper-1" style="display: none;">Test 1</div>
<div class="content-wrapper-2" style="display: none;">Test 2</div>
<div class="content-wrapper-3" style="display: none;">Test 3</div>

QUICK EXPLANATION

Get the ID of the clicked element and extract all the numbers. For example "button-9" to "9". Afterwards concatenat the string .content-wrapper + ID and display the contents of that container.*

This is working in Google Chrome but not in Firefox. I could break it down to this line:

var elementId = event.target.id.replace(/\D/g,'');

but i can not figure out whats wrong here. A little help woud be appreciated. Thank you.

Answer 1

Your line assumes event exists as a global variable:

event.target.id.replace(/\D/g,'');
^^^^^

This is a non-standard property and is not supported in Firefox. You already have access to the event as the first argument to your callback:

e.target.id.replace(/\D/g,'');
^