事件點擊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'); 
});