tags:

views:

42

answers:

0

Right now, my script adds a box to the cursor when I click on an image, as can be seen in the following code. Please note, this is jQuery.

$(function() {
    var tag_box = $("<div>").appendTo("body").css({
        "width":    "40px",
        "height":   "40px",
        "border":   "4px solid #000000",
        "position": "absolute",
        "display":  "none",
        "padding":  "15px"
    });

    $("#image-wrapper").live('click', function(e) {
        tag_box.css({
            "left":    e.pageX - 40,
            "top":     e.pageY - 40,
            "display": "block"
        });
    });

I would like to add a text field to appear right below that tag_box on that same click. I tried to do this, but it hasn't worked out like I thought it would:

    var comment_box = $("<label> Comment: <input type='text' name='comment' autocomplete='off'></label>");
    $("#image-wrapper").live('click', function() {
        $("body").append(comment_box);
    });
});

Any assistance you can give me, would be greatly appreciated.

Thanks.

Edit: Please note that the var comment_box is included in the document ready $(function() at the top. The trailing parens correspond to the top ones.