Click event can't be captured

Question

Once a icon is clicked a submit button is set to visible. But then that button is clicked this does not work ( class of that button- 'edit_forum_reply' )

    $('.edit_forum_reply').on("click", function (event) {

   alert("NO RESULT");
     });

HTML :

    <td style="display: none;" data-id="{{ replyId }}">

        <div id="summernote2" data-id="{{ replyId }}"></div>
        <a class="btn btn-primary edit-forum-reply" style="display:none;"  data-id="{{ replyId }}">Submit</a>
        <a class="btn"  style="display : none;" href="forum/api/topic/" data-id="{{ replyId }}">Cancel</a>

   </td>

Answer 1

class of that button- 'edit_forum_reply'

You missed the dot for class selector in the selector for binding event. I also could not see that class in the provided html.

You have use hyphen in html edit-forum-reply but for binding code you used underscore $('.edit_forum_reply').on

$('.edit-forum-reply').live("click", function (event) {
    alert("NO RESULT");
});

The live() is deprecated you better use on()

$('.edit-forum-reply').on("click", function (event) {
    alert("NO RESULT");
});

If the element with class edit_forum_reply then you need event delegation using on

$(document).on("click", '.edit-forum-reply', function (event) {
    alert("NO RESULT");
});

Answer 2

You should be using same class element in html as well as javascript function. Here you were using two different names :

edit-forum-reply in HTML and edit_forum_reply in JS. Use the following and this will work.

JS:

$(document).on("click",'.edit-forum-reply', function (event) {
    alert("NO RESULT");
});

HTML :

<a class="btn btn-primary edit-forum-reply" style="display:none;"  data-id="{{ replyId }}">Submit</a>

You would need to bind the event to dynamically added content.

Answer 3

Class selector needs a .

$('.edit_forum_reply')

Also, live() is deprecated. Use on() instead (unless you're using a very old version of jQuery)

Answer 4

Yes, you are right, Live() is deprecated.

You should try below code:

$('.edit-forum-reply').on("click", function (event) {
    alert("NO RESULT");
});