JQuery 从 ajax 加载的数据中获取元素 ID

Question

我使用 JQuery 从 PHP 页面加载数据并且工作正常。现在我希望当我单击这些加载的元素之一时，警报会显示所选元素的 ID。我能怎么做？如果我手动将一个元素放入 div "output" 它可以工作，但是对于用 $.ajax() 创建的元素它不起作用。这是代码。

<input type="text" id="ricerca">
<div id="output" style="border: 1px solid #FF0000;"></div>

$(document).ready(function () {
    // Autocomplete
    $("#ricerca").keyup(function () {
        $(function () {
            var ricerca = $("#ricerca").val();
            $('#output').html("");
            if (ricerca.length > 0) {
                $.ajax({
                    url: 'dati.php',
                    method: 'POST',
                    data: {
                        ricerca: ricerca
                    },
                    dataType: 'json',
                    success: function (data) {
                        for (var i in data) {
                            var row = data[i];
                            var id = row[0];
                            var name = row[1];
                            $('#output').append("<a id='" + id + "' href='#'>" + name + "</a><br>");
                        }
                    }
                });
            }
        });
    });

    // Show ID
    $('#output a').click(function () {
        alert(this.id);
    });
});

Answer 1

动态注入需要做如下操作html:

$(document).on("click", "#output a", function() {
    alert(this.id);
});

基本上 #output 不会在您第一次加载页面时出现，因此您需要将事件绑定到它。

因此 .on 使您能够将事件委托给处理程序。

有用的链接：

What is DOM Event delegation?

Direct and delegated events

Answer 2

你必须使用.on()来注册动态生成元素的点击事件

// Show ID

    $(document).on("click",'#output a',function() {
         alert(this.id);
    });

Answer 3

应该是

alert($(this).attr("id"));

JQuery 从 ajax 加载的数据中获取元素 ID

JQuery get element id from ajax loaded data

ajax

jquery

elements