JQuery Type-error e is undefined issue

Question

This code is giving me an error:

var openPrayer = function(e) {
    e.preventDefault();
    var id   = $(e.currentTarget).data('id');
    var json = $.getJSON('/user/prayers/' + id);
    var temp = new t($('#prayerTemp').html());

    json.then(function(resp){
        var modal = temp.render(resp[0]);
        $('body').append(modal);
    });
}
$('.open-prayer').on('click', openPrayer);

This is the error:

TypeError: e is undefined

I don't know where I am going wrong, the code above loads a JSON response into a template I've set up below:

<script type="t/template" id="prayerTemp">
    <div class="prayer-modal">
        <img src="/img/icons/heart_infographic_prayer.jpg" class="hearts"/>
        <div class="prayer">
            <h1>@{{=name}}</h1>
            <p>@{{=body}}</p>
        </div>
        <span class="close-prayer">&times;</span>
    </div>
</script>

Any help is much appreciated.

Answer 1

instead of

 var id = $(e.currentTarget).data('id');

use

 var id = $(e.target).data('id');

its working fine.

if want to know more difference between e.currentTarget and e.target see here :-

Difference between e.target and e.currentTarget

Answer 2

var id = e.currentTarget.id;

Works fine too. But if you need IE < 8 compatibility use jQuery solution or solution explained at MDN