带有blur()jquery的可编辑输入文本

时间:2013-07-03 16:33:21

标签: jquery

我遇到了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>

使用点击

时,我正在使用带有Editable元素的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()函数时,我无法获得value <input/>元素并返回元素<a>时模糊。

1 个答案:

答案 0 :(得分: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函数。