href点击未在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>

请帮忙？

Answer 1

如果使用事件委派，您的问题就消失了（并且您的应用程序变得更高效，更不容易发生内存泄漏）。

// 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);
});

Answer 2

当您将.move元素动态添加到页面时，您必须使用jQuery的on()方法将事件委托给.move元素的祖先，该元素在JavaScript首次加载时确实存在。

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

通过事件委托，我们可以将单个事件侦听器附加到父元素，该元素将为与选择器匹配的所有后代触发，无论这些后代现在存在还是将来添加。

您可以在此处阅读有关jQuery事件委托的更多信息。

Answer 3

尝试这个

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

Answer 4

未触发事件的原因是，仅当您调用.click()方法时，事件才添加到页面上存在的元素中。

相反，您可以使用事件委托：

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

这实际上说：调用函数时匹配任何元素.move这里面document.body点击。

我知道其他人已经说过了，但是我想使事件委托更加清晰。