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

问题在于：

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();

Answer 2

事实证明，XML错误的原因是“。”

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

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

Answer 3

我倾向于做这样的事情来附加点击事件（在我的例子中为一个范围）

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

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

Answer 4

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

那么这样的工作会怎么样？

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

我不确定为什么你的.click（）处理程序不起作用。

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

4 个答案: