我的代码就是这个.在 jsfiddle. var inp = $('input').attr({'class':'txtEdit txt', 'type':'text'}) .val($(this).html()).blur(function (){ if($(this).val().length != ''){ $(txt).replaceWith($(editable) .html($(this).val())); } else{ al
var inp = $('<input>').attr({'class':'txtEdit txt', 'type':'text'}) .val($(this).html()).blur(function (){ if($(this).val().length != ''){ $(txt).replaceWith($(editable) .html($(this).val())); } else{ alert("Cannot contain empty value!")} }).keydown(function (e){ if(e.keyCode == 13 || e.keyCode == 9){ e.preventDefault(); $(this).trigger('blur'); } }).appendTo($(txt));
我正在创建一个包含大量事件的输入元素并添加到div.现在我想关注它,因为它被附加到DOM.但重点似乎并没有起作用.
这是总代码.
<html> <head> <title>My jQuery plugin</title> <script src="jquery.js"></script> <script> $(function () { $('.editable').txtEdit(); }); (function($){ $.fn.txtEdit = function() { var editable = $(this); $(editable).live('click', function () { var txt = $('<div>').attr('class', 'txtEdit div'); var inp = $('<input>').attr({'class':'txtEdit txt', 'type':'text'}) .val($(this).html()).blur(function (){ if($(this).val().length != ''){ $(txt).replaceWith($(editable) .html($(this).val())); } else{ alert("Cannot contain empty value!")} }).keydown(function (e){ if(e.keyCode == 13 || e.keyCode == 9){ e.preventDefault(); $(this).trigger('blur'); } }).appendTo($(txt)); $(this).replaceWith(txt); } ); }; })(jQuery); </script> </head> <body> <div class="editable">this is editable div</div> </body> </html>
任何想法?
问候,
加inp.focus();
后
$(this).replaceWith(txt);
因为你的div是在焦点动作之后创建的,这是错误的.您应该显示div然后专注于输入.