Question

I have created some JQuery that on click of specified HTML it then becomes editable via an input box and when the user either clicks enter or clicks off (ie the text box looses focus) it assigns the value to the text box to the HTML. This works fine (as far as I can tell).

To validate the input to ensure that there is not empty value I have an alert box that pops up both on loose focus (.blur) and on enter press to inform the user that the value is empty and the value is not assigned. These work to a degree.

My two problems are as follows:

The on enter press alert box pops up multiple times on one press and I am unsure as to why.

After the on enter press alert box is closed the loose focus (.blur) function no longer works.

I appreciate any help or guidance you folks can offer.

My code:

$(document).ready(function () {
$(".imageHolder").hover(function () {
    $(this).append('<div class="xdiv"></div>');
    if ($('.titleinput', this).length) {
        $(".xdiv").remove();
    }
    $(".imageName", this).click(function () {
        imageName = $(this);
        parent_div = $(this).parent();
        image_val = $.trim($(this).html())
        $(".formtags").remove();
        $(".imageName").show();
        $(imageName).hide();
        $(parent_div).append('<form class="formtags"><input class="titleinput" type="text" name="ImageTitle" /></form>');
        $(".titleinput").focus(function(){
        this.select();
        });
        $(".titleinput", parent_div).val(image_val);
        $(".xdiv").remove();
        $(".titleinput").blur(function() {
            if($(".titleinput").val() == '') {
            alert("Please enter Image Title Focus Lost");
            } else {
        image_val = $(".titleinput").val();
        $(imageName).html(image_val);
        $(".formtags").remove();
        $(".imageName").show();
            }
        });
        $(document).keypress(function (e) {
            if (e.keyCode == 13 && $(".titleinput",this).val() == '') {
                $(".formtags").remove();
                $(parent_div).append('<form class="formtags"><input class="titleinput" type="text" name="ImageTitle" /></form>');
                alert("Please enter Image Title Enter Pressed");
                e.preventDefault();
                } else if (e.keyCode == 13) {
                image_val = $(".titleinput").val();
                $(imageName).html(image_val);
                $(".formtags").remove();
                $(".imageName").show();
                e.preventDefault();
            }
        });
    });
    $(".xdiv").click(function () {
        alert('Click Handler Called');
    });
}, function () {
    $(".xdiv", this).remove();
});
$(".imageName", this).show();
});

Answer 1

Two things

1) Don’t use alerts to validate content, it’s not a good practice. I can suggest you to use this (validity) jQuery plugin. Read the documentation and find there ‘Using Validity with Ajax‘ header (it can handle dynamically added inputs)

2) Second thing. But I’m not sure if I’m right about this issue. Check if you don’t do something like this in your code (maybe it’s not a loop in your code but pretty much this kind of behaviour, a few times ‘binding’ event to function) jsFiddle example of few times binding event. And if this is the problem try doing this

$('#elementId').unbind('click').bind('click', function() {
//some code here
});