Оповещение JQuery и проблемы с проверкой прессы

Question

Я создал JQuery, который при щелчке указанного HTML затем становится редактируемым через поле ввода, и когда пользователь либо нажимает ввод, либо выключает (т. Е. Текстовое поле теряет фокус), он присваивает значение текстовому полюHTML.Это работает отлично (насколько я могу судить).

Чтобы проверить ввод, чтобы убедиться, что нет пустого значения, у меня есть окно предупреждения, которое появляется как при свободном фокусе (.blur), так и при нажатии на Enterинформировать пользователя о том, что значение пустое и значение не назначено.Они работают до некоторой степени.

Две мои проблемы заключаются в следующем:

Окно предупреждения о входе в систему нажимается несколько раз при одном нажатии, и я не знаю, почему.

После того, как окно предупреждения при нажатии на кнопку ввода закрыто, функция свободного фокуса (.blur) больше не работает.

Я ценю любую помощь или руководство, которое вы, ребята, можете предложить.

Мой код:

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

Две вещи

1) Не используйте оповещения для проверки контента, это не очень хорошая практика. Я могу предложить вам использовать этот ( validity ) плагин jQuery. Прочитайте документацию и найдите там заголовок ' Using Validity with Ajax ' (он может обрабатывать динамически добавленные входные данные)

2) Второе. Но я не уверен, прав ли я в этом вопросе. Проверьте, не делаете ли вы что-то подобное в своем коде (возможно, это не цикл в вашем коде, а в значительной степени такого рода поведение, несколько раз связывающее событие с функцией) пример jsFiddle связывания нескольких раз . И если это проблема, попробуйте сделать это

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