使用jQuery编辑选择新插入的元素

Question

我正在尝试使用jQuery编写自己的就地编辑。我的代码是这样的;

$(".comment-edit").bind({ 
    click: function(){ 
     commentId = $(this).parent().parent().attr("id"); 
     commentEditable = $("#"+commentId+" .comment-text"); 
     if (commentEditable.hasClass('active-inline')) { 
      alert("already editable aq"); 
      return false; 
     } 
     contents = $.trim($("#"+commentId+" .comment-text").text()); 
     commentEditable.addClass("active-inline").empty(); 
     var editBox = '<textarea id="newComment"cols="50" rows="6"></textarea><button class="newCommentSave">Save</button><button class="newCommentCancel">Cansel</button>'; 
     $(editBox+" textarea").val(contents).appendTo(commentEditable).focus(); 

     $.(".newCommentSave").live({ 
      click: function(){ 
       alert("Save"); 
       return false; 
      } 
     }); 

     $.(".newCommentCancel").click(function(){ 
      alert("Cancel"); 
      return false; 
     }); 
     return false; 
    } 
}); 

正如你所看到的，我尝试了“live（）”和“click（）”来与新创建的按钮进行交互。但是这不起作用。

我得到XML过滤器适用于非XML值(function (a, b) {return new (c.fn.init)(a, b);})

任何想法？什么似乎出错？

编辑： 的Html看起来是这样的：

<div class="comment" id="comment-48"> 
    <div class="comment-author"> 
    <a href="/profil/defiant">defiant</a> 
    <span class="date">2010-11-09 01:51:09</span> 
    </div> 
    <div class="comment-text">Comment Text....</div> 
</div> 

Answer 1

事实证明，对于XML错误的原因是一个“”

$.(".newCommentSave").live({ 
// stuff 
}) 

美元符号后面的点是导致此错误的原因。至少代码工作正常，没有它。

Answer 2

我倾向于做这样的事情（在我的例子，以一个跨度）附加click事件

var span = $("<span>some text</span>"); 
span.click(function() { alert('yay'); }); 

我会将你的editBox变量分解成三个不同的变量，然后看看会发生什么。

Answer 3

.live（）语法是.live('event', function)，我不认为它接受事件：函数对的映射。

所以会这样的工作？

$.(".newCommentSave").live('click', function(){ 
    alert("Save"); 
    return false; 
}); 

我不知道为什么你的.click（）处理程序不能正常工作。

Answer 4

的问题是在这里：

var editBox = '<textarea id="newComment"cols="50" rows="6"></textarea><button class="newCommentSave">Save</button><button class="newCommentCancel">Cancel</button>'; 
$(editBox+" textarea").val(contents).appendTo(commentEditable).focus(); 

editBox是一个字符串，所以你得到这个结果：

$("<textarea/><button /> textarea") 

...这不是XML或有效的选择，抛出一个错误。相反，你要这样：

$(editBox).filter("textarea").val(contents) 
      .end().appendTo(commentEditable).focus(); 

这会从您刚刚通过.filter()（因为它是一个根级别元素）创建该对象的<textarea>，设置内容，然后使用.end()跳回到链$(editBox)包含两个元素都要追加。这虽然焦点的按钮，所以你可能想这个代替：

$(editBox).appendTo(commentEditable).filter("textarea").val(contents).focus();