my jquery code dont work?

Question

UCCN1003

Edit

<script type="text/javascript">
    $(function(){
        $('a.edit').click(function(event){

            var change = $(this).parent('div').find('p');
            var changeText = change.text();
            var wrapper = $(this).parent('div');
            var clone = change.clone(true);

            var changeBox = $(this).parent('div').find('.editBox');
            var changeBoxText = changeBox.val();
            if($(this).text() == 'Edit'){
                wrapper.prepend("<input class='editBox' type='text' value='"+ changeText + "'/>");
                wrapper.append("<a href='#' class='save' style='margin-left:10px' >Save</a>");
                change.remove();
                $(this).text("cancel");
            }else if($(this).text()=='cancel'){
                wrapper.prepend("<p>" + changeBoxText +"</p>");
                $('.editBox').remove();
                $('.save').remove();
                $(this).text('Edit');
            }

        });


        $('.save').click(function(event){
            var editBox = $(this).parent('div').find('.editBox');
            var editBoxText = editBox.text();

            var wrapper = $(this).parent('div');
            wrapper.prepand("<p>" + editBoxText + "</p>");
            editBox.remove();
            $(this).remove();
        });
    });
</script>

My part that work work is

 $('.save').click(function(event){
        var editBox = $(this).parent('div').find('.editBox');
        var editBoxText = editBox.text();

        var wrapper = $(this).parent('div');
        wrapper.prepand("<p>" + editBoxText + "</p>");
        editBox.remove();
        $(this).remove();
    });

where the wrapper wont prepand the p tag and the editBox and the .save wont be remove. i try to add alert("work") in this and it wont alert at all. anyone know why?

Answer 1

It's this bit: .prepand(), should be: .prepend() :)

Currently it would throw a .prepand() is not a function error, something along those lines, for a shorter complete version you can use .prependTo() as well:

$('.save').live('click', function() {
  var editBox = $(this).parent('div').find('.editBox').remove();
  $("<p />", { text: editBox.val() }).prependTo($(this).parent('div'));
  $(this).remove();
});

At second glance I see you're adding these dynamically, in which case you should use .live() like I have above, the .click() with a selector won't find these elements created later, so it'll never run :)