Question

我正在通过jQuery的html()函数添加新元素。然后我想要handel它。你能看到这种方式吗？

 $("#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.          
 });

在innerHTML或html（）之后处理元素。使用Javascript

2 个答案: