jquery - jquery - 无法对添加的元素执行操作（使用 jquery 在运行时添加）

Question

我的想法是创建一个显示多个文本的按钮，当我单击该文本时，它将被添加到文本框中

我用于显示适合的多个文本的代码：

$("#btnLook").click(function(){
    $.ajax({
   ...
        success: function(data1) {
        for( var i = 0; i < data1.length; i++ )
            {
            var spn = '<span class ="spnSuggestion" id="data1[' + i + ']">' + data1[i] + '</span>'; 
            $("#divSuggestion").html($("#divSuggestion").html() + '  ' + spn);
            }
        },
   ...
  });

然后此功能用于单击文本

  $(".spnSuggestion").click(function(){
    alert ("A");

但是这段代码没有运行，也没有显示任何警告框，请提供任何解决方案

Answer 1

$(".spnSuggestion")当您调用它时，返回与选择器匹配的所有元素。它不考虑任何新元素。

要考虑新元素，请使用事件委托：

$('#divSuggestion').on('click', '.spnSuggestion', function() {
    ...
});

另外，不要滥用.html()。制作一个 jQuery 对象并附加它：

$('<span class ="spnSuggestion" id="data1[' + i + ']">' + data1[i] + '</span>').appendTo('#divSuggestion');

或者：

$('<span>', {
    'class': 'spnSuggestion',
    'id': 'data1[' + i + ']',
    'text': data1[i]
}).appendTo('#divSuggestion');

Answer 2

$('body').on('click', '.spnSuggestion', function(){
    alert ("A");
}

这会将 click 事件应用于 body 元素（您可以使用任何 jQuery 选择器来使用 DOM 树上更高的任何元素），但只会为.spnSuggestion元素触发它。它适用于动态添加的元素。

Answer 3

利用

 $(".spnSuggestion").live('click',function(){
  alert ("A"); 

因为您的元素是在运行时创建的，并且 .click 在准备好的文档上运行。