使用blur() jquery可编辑的输入文本

Question

我在使用jquery blur()函数时遇到了问题，下面是代码：

<a class="quick_edit_title" s="1" u="/administrator/user-group/index/edit/1">Admin</a>
<a class="quick_edit_title" s="1" u="/administrator/user-group/index/edit/2">User</a>
<a class="quick_edit_title" s="1" u="/administrator/user-group/index/edit/3">Mod</a>

在使用click时，我使用带有可编辑元素的Jquery Ajax

$(document).ready(function () {
    $('.quick_edit_title').each(function () {
        $(this).click(function () {
            var url = $(this).attr('u');
            var status = $(this).attr('s');
            var title = $(this).html();
            var old_element = this;
            var input = $("<input type='text' size='45' value='" + title.replace(/'/gi, "\\'") + "' class='input_quick_edit'/>");

            //$(this).replaceWith(input).blur(function() {
            //alert(this.value);
            //});  

        });
    });
});

当我单击可编辑<a>时。添加了元素<input/>，但当我使用jquery的blur()函数时，我无法获取<input/>元素的value，并且在模糊时返回元素<a>。

Answer 1

尝试如下所示：

$(document).on('click', '.quick_edit_title', function(){
    var url = $(this).attr('u');
    var status = $(this).attr('s');
    var title = $(this).html();
    var input = $("<input type='text' size='45' value='" + title.replace(/'/gi,"\\'") + "' class='input_quick_edit'/>");

    $(this).replaceWith(input); 
}).on('blur', '.input_quick_edit', function() {
    alert(this.value);
});

无需遍历.each()并为类分配单击处理程序，您只需使类的单击处理程序、替换内容并链接blur函数即可。