JQuery Click event is not working in Firefox and Safari Browsers

I need to place annotations mark for image,?when user click on each annotations need to display?a corresponding annotation message?for the image.

It is working fine in chrome browsers both Mobile(IOS and?Android) and Desktop but not working in Safari and Firefox browsers in both mobile and desktop.


$('.announation').each(function(i) {
$('.announation').eq(i).on('click touchstart', function(e) {
                    top: 0,
                    left: document.getElementById(e.srcElement.id).offsetLeft - 380
                document.getElementById(e.srcElement.id).innerText = "x";
                $('#' + e.srcElement.id).addClass("active");


   <div class="annotationsmark">
    <div class="announation" alt="one" id="oneA">+</div>
    <div class="announation" alt="two" id="twoA">+</div>

    <div id="messages">
         <div class="one">One</div>
         <div class="two">two</div>

I tried Multiple ways :

Didn't work:

$(document.body).on( "click touchstart", ".announation", function() { });

Didn't work:

$('body .announation').eq(i).on('click touchstart', function(e){});

Didn't work:

$('.annotationsmark').on('click', '.announation', function(e) {
var i=$(this).index();

Answers 1

  • The issue may be because of srcElement.Firefox & Safari may not support this. Try replacing srcElement with target that is e.srcElement.id with e.target.id

    Alternatively you can create a variable and use that variable

    var target = event.target || event.srcElement;

Related Articles