Question

这是我的小提琴JsFiddle

$(function() {
    $('.glyphicon-edit').click(function () {
        $(this).parent().find('.form-control').removeAttr("readonly").focus();
    });
    $('.form-control:focus').blur(function() {
        $(this).addAttr("readonly");
    });
});

我想做什么？我正在尝试创建一个动态可编辑的表单。它应该有

当有人点击编辑图标时，相应的输入字段应该聚焦并变得可编辑。（我完成了这部分）。

接下来我想要的是当一个元素处于焦点状态并且它失去焦点时，我想再次向该元素添加readonly属性。这部分不起作用。可以有人解释我为什么。并给出一个解决方案

编辑：在后面的部分我正在尝试提醒（＆＃34;一些消息＆＃34;）以检查事件是否被触发。发布时我刚用addAttr替换它。这是一个错字

Answer 1

你可以改用：

--DEMO--

$(function () {
    $('.glyphicon-edit').click(function () {
        $(this).parent().find('.form-control').prop("readonly", false).focus().one('blur', function () {
            $(this).prop('readonly', true);
        });
    });
});

Answer 2

没有addAttr()功能。 attr的setter看起来像这样：

$('.form-control').blur(function() {
    $(this).attr("readonly", true);
});

此外，这里的:focus伪造选择器是多余的，因为激活元素具有的blur事件以便首先集中注意力。

仅在聚焦元素失去焦点时才触发事件

2 个答案:

--DEMO--