jquery 2.1.4 on not working

Question

What can be possibly wrong in this statement?

$(document).on('click',".post_like",function(e) {
    var postId  = $(this).data('id');
    var postOrigin = $(this).data('originalid');
    var interface_type = 'like';

    alert('test');

    //interact_with_post();
    //e.stopPropagation();
});

As I'm using jquery 2.1.4 It was expected I could interact with ajax loaded elements but I can`t even click on any element.

PS: it seems that I can't run on() with jquery 1.11.3 on firefox (didn't check other browsers).

UPDADE

HTML

<div class="panel-footer" style="background:#444; color:#FFF; border-radius:0 0 8px 8px">
<div class="row">
<div class="col-lg-3 text-center" style="border-right: 1px solid #FFF; width:24%; float: left">
<i class="fa fa-clock-o"></i>
<br>
14 hrs ago
</div>
<div class="col-lg-3 text-center **post_like**" style="width:24% float: left ; border-right: 1px solid #FFF" data-originalid="73" data-id="73">
<i id="like_icon73" class="fa fa-heart-o "> </i>
<br>
<normal id="post_like_count73"> 0</normal>
</div>
<div class="col-lg-3 text-center post_comment" left"="" float:="" style="border-right: 1px solid #FFF; width:24%" data-item="73">
<i class="fa fa-comment"></i>
<br>
0
</div>
<div class="col-lg-3 text-center post_unsave" style="width:24% float: left" data-originalid="73" data-id="73">
</div>
</div>

So, the idea behind this is , as I'm developing a social networking project, I'm tracking events arround the posts:

I have two functions when something is clicked:

In this case when class post is clicked ( the parent class ) it runs a (study) function that looks at the part was clicked (comment, save, like , open modal , and so on ) and stores the info - intented to study behaviours . At the same time it runs a rewarding function (intended to make them interact) - this function does this: if the user clicked like, add 1 to the like count of the post, changes the class to post_unlike and changes the icon.

Everything works like charm with on("click", function(){}); Except I can't track live clicks ( if the class was post_like , even after I changed it to post_unlike, it continues behaving like it is post_like ).

Now, when I run the same function with on('click', 'class', function(){}); I don't even have a response on the terminal. Not on this, not on ajax loaded posts prior window.onload.

When I used live() it worked like a charm.

Answer 1

This runs just fine for me...(Firefox 38.0.1, Chrome 42.0.2311.152 m, Chrome 43.0.2357.81 m)

$(document).on('click',".post_like",function(e) {
    var postId  = $(this).data('id');
    var postOrigin = $(this).data('originalid');
    var interface_type = 'like';

    alert('test');

    //interact_with_post();
    //e.stopPropagation();
});

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<div class="post_like">Click Me!</div>