Question

我使用JQuery从PHP页面加载数据，它工作正常。现在我希望当我点击其中一个加载的元素时，警报会显示所选元素的ID。我能怎么做？如果我将一个元素手动放入div＆＃34;输出＆＃34;它有效，但使用$ .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

3 个答案: