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是在文档就绪时运行的。