事件点击jQuery不工作

Question

我使用jQuery 1.10.2创建一个项目。

它在点击提交按钮时添加注释。它使用javascript创建评论。

$(document).ready(function() { 
    $("#enviar").on('click',function(){ 
     var texto=$("#comentarios").val(); 
     var fecha= new Date(); 
     var cruz= "<img class='eliminar' src='error.png'>"+"</img>"; 
     var fechaComentario= "<span class='fecha'>"+fecha.getHours()+":"+fecha.getMinutes()+":"+fecha.getSeconds()+"</span>"; 
     var divComentarioEscrito= "<div class='comentario-enviado'>"; 
     var divCompleto= divComentarioEscrito+fechaComentario+" "+texto+" "+cruz+"</div>"; 
      $("#comentarios-escritos").prepend(divCompleto); 
    }); 
    $(".eliminar").on('click',function(){ 
     alert("DELETEEEE"); 
    }); 
}); 

我想获得警报“DELETEEE”，但它不起作用。

我试图使用.live jquery函数，它也没有工作。

我该怎么办？

谢谢。

Answer 1

当您在页面加载后追加元素时，您需要使用委托事件处理程序。试试这个：

$(document).ready(function() { 
    $("#enviar").on('click',function(){ 
     var texto = $("#comentarios").val(); 
     var fecha = new Date(); 
     var cruz = "<img class='eliminar' src='error.png'></img>"; 
     var fechaComentario = "<span class='fecha'>" + fecha.getHours() + ":" + fecha.getMinutes() + ":" + fecha.getSeconds() + "</span>"; 
     var divComentarioEscrito = "<div class='comentario-enviado'>"; 
     var divCompleto = divComentarioEscrito + fechaComentario + " " + texto + " " + cruz + "</div>"; 
     $("#comentarios-escritos").prepend(divCompleto); 
    }); 

    // Note the amended selector here... 
    $("#comentarios-escritos").on('click', '.eliminar', function(){ 
     alert("DELETEEEE"); 
    }); 
}); 

此外，而不是建设和附加一个巨大的字符串，你可以使用jQuery操作DOM，这应该是更快：

$("#enviar").on('click', function() { 
    var $div = $('<div />', { "class": "comentario-enviado" }).prependTo("#comentarios-escritos"); 
    var fecha = new Date(); 
    $div.append($('<span />', { "class": "fecha", "text": fecha.getHours() + ":" + fecha.getMinutes() + ":" + fecha.getSeconds() }); 
    $div.append($("#comentarios").val()); 
    $div.append($('<img />', { "class": "eliminar", "src": "error.png" }); 
}); 

Answer 2

你可以试试这个？

$('#comentarios-escritos').on("click","img", function (e) { 
     e.preventDefault(); 
     alert('DELETEEEE'); 
});