Question

我创建了一些JQuery，点击指定的HTML然后通过输入框变为可编辑，当用户点击进入或点击关闭（即文本框失去焦点）时，它将值分配给文本框HTML。这很好（据我所知）。

要验证输入以确保没有空值，我会在松散焦点（.blur）上弹出一个警告框，然后按下以通知用户该值为空并且未分配值。这些都在一定程度上起作用。

我的两个问题如下：

一次按下弹出多次输入按下警告框，我不确定为什么。

在按下输入按下警告框后，松散焦点（.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插件。阅读文档，找到'使用Ajax的有效性'标题（它可以处理动态添加的输入）

2）第二件事。但我不确定这个问题我是否正确。检查你的代码中是否有这样的事情（也许它不是代码中的循环，而是这种行为，有几次'绑定'事件的功能）jsFiddle example of few times binding event。如果这是问题，请尝试这样做

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

JQuery警报和输入按压验证问题

1 个答案: