处理innerHTML或html（）后的元素。 Javascript

Question

我正在通过jQuery的html()函数添加新元素。然后我想要处理它。是否有可能以你在这里看到的方式做到这一点？

$("#renamePlaylist").click(function(){ 
    var aa = '<input type="text" name="plst_name" value="'+$("#playlist_header").find("span").text()+'" size="'+Math.round($("#playlist_header").find("span").text().length/2)+'">'+ 
       '<input id="renameCurrent" type="image" name="+" value="submit" alt="+">'; 
    $("#playlist_header").find('span').html(aa);     
}); 

$("#renameCurrent").click(function(){ 
    alert('hello') 
}); 

Answer 1

您可以使用.live()，像这样：

$("#renameCurrent").live('click', function(){ 
    alert('hello') 
}); 

;或者执行绑定创建之后，像这样：

$("#renamePlaylist").click(function(){ 
    var aa = '<input type="text" name="plst_name" value="'+$("#playlist_header").find("span").text()+'" size="'+Math.round($("#playlist_header").find("span").text().length/2)+'">'+ 
      '<input id="renameCurrent" type="image" name="+" value="submit" alt="+">'; 
    $("#playlist_header").find('span').html(aa); 
    $("#renameCurrent").click(function(){ alert('hello'); }); 
}); 

Answer 2

您可以使用.delegate()处理元素被动态添加到#playlist_header容器中。

$("#playlist_header").delegate('#renameCurrent', 'click', function(){ 
    alert('hello'); 
}); 

或者只是在创建元素时添加.click()处理程序。

$("#renamePlaylist").click(function(){ 
    var $aa = $('<input type="text" name="plst_name" value="'+$("#playlist_header").find("span").text()+'" size="'+Math.round($("#playlist_header").find("span").text().length/2)+'">'+ 
      '<input id="renameCurrent" type="image" name="+" value="submit" alt="+">'); 
    $aa.filter('#renameCurrent').click(function() { 
      alert('hello'); 
    }); 
    $("#playlist_header span").html($aa); // Edit from @Nick's comment.   
});