a href click not triggering in jquery

Question

        $(function() {

            $.getJSON("companies.json", function(response) {

                var html = '<table id="tbl">';
                response.businesses.forEach(function(row) {
                    html += '<tr><td><a href="#" class="move" idname="' + row.id + '">' + row.id + '</a></td><td>' + row.name;
                });
                html += '</table>';

                $("#tabledata").html(html);
            });


            $(".move").click(function() {

                var $id = $(this).attr("idname");

                $.getJSON("companies.json", function(response) {


                    $.map(response.businesses, function(obj) {
                        if (obj.id == $id)
                            console.log(obj);
                        return obj; // or return obj.name, whatever.
                    });
                });
            });
        });

HTML:

    <div id="tabledata" class='left'></div>
    <div class="right"></div>

Please help?

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — JJJ, Jan 06 '15 at 16:54

score 2 · Answer 1 · answered Jan 06 '15 at 16:54

If you use event delegation, your problem goes away (and your app becomes more performant and less prone to memory leaks).

// Only do this once, when your page loads...
$(document.body).on('click', '.move', function (ev) {
    // This is the link that was clicked.
    var $targ = $(ev.target);
});

score 2 · Accepted Answer · answered Jan 06 '15 at 16:54

As your .move element is added to your page dynamically, you have to make use of jQuery's on() method to delegate the event to an ancestor of the .move element which does exist when your JavaScript first loads.

$(document).on('click', '.move', function() { ... });

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

You can read more about jQuery's event delegation here.

score 0 · Answer 3 · answered Jan 06 '15 at 17:00

0

Try This

$('#tabledata').on('click', '.move', function(e) { ... });

answered Jan 06 '15 at 17:00

Muhammed Shuhaib

314
6
18

score 0 · Answer 4 · answered Jan 06 '15 at 17:25

The reason the event isn't being triggered is because the event is only added to elements that exist on the page when you call the .click() method.

Instead, you can use event delegation:

$(document.body).on('click', '.move', function (ev) {
    var $targ = $(ev.target);
});

which really says: call the function when any element that matches .move that's inside document.body is clicked.

I know others have said this already but I wanted to make event delegation clearer.

a href click not triggering in jquery

4 Answers4