處理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.   
});