редактировать на месте с помощью 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);})

Есть идеи? Что, кажется, идет не так?

Edit: 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

Проблема здесь:

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

Получает <textarea> от того объекта, который вы только что создали с помощью .filter() (так как это элемент корневого уровня), устанавливает содержимое, затем использует .end() для вернитесь в цепочку к $(editBox), который содержит оба элемента для добавления. Это бы сфокусировало кнопку, так что вместо этого вы можете захотеть:

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

Answer 3

Синтаксис .live (): .live('event', function), я не думаю, что он принимает карту события: пары функций.

Так что-то вроде этой работы?

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

Я не уверен, почему ваш обработчик .click () не работал.

Answer 4

Я склонен делать что-то подобное, чтобы прикрепить событие click (к диапазону в моем примере)

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

Я бы разбил вашу переменную editBox на три разные переменные и посмотрел бы, что будет потом.