CODEWITHSUNDEEP
javascriptjquerydom
Sinan
Sinan

Reputation: 5980

edit in place with jQuery selecting newly inserted elements

I am trying to write my own edit-in-place using jQuery. My code is something like this;

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

As you can see I tried both "live()" and "click()" for interacting with the newly created buttons. However this doesn't work.

I am getting XML filter is applied to non-XML value (function (a, b) {return new (c.fn.init)(a, b);})

Any ideas? What seems to be going wrong?

Edit: Html looks something like this: 

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

Upvotes: 1

Views: 1363

Answers (4)

Sinan
Sinan

Reputation: 5980

As it turns out, the reason for XML error was a "."

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

The dot after the dollar sign is what causing this error. At least the code was working fine without it.

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630359

The problem is here:

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 is a string, so you're getting this as a result:

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

...which isn't XML or a valid selector, throwing an error. Instead you want this:

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

This gets the <textarea> from that object you just created via .filter() (since it's a root level element), sets the contents, then uses .end() to hop back in the chain to $(editBox) which contains both elements to append. This would focus the button though, so you may want this instead:

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

Upvotes: 1

xqwzts
xqwzts

Reputation: 3538

The .live() syntax is .live('event', function), I don't think it accepts a map of event:function pairs.

So would something like this work?

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

I'm not sure why your .click() handler didn't work though.

Upvotes: 0

Fiona - myaccessible.website
Fiona - myaccessible.website

Reputation: 14921

I tend to do something like this to attach a click event (to a span in my example)

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

I'd break down your editBox variable into three different variables and see what happens then.

Upvotes: 0

Related Questions