使用jQuery文本框的内联编辑似乎是ReadOnly

Question

我正在尝试使用jQuery进行一些内联编辑。我的问题是当我创建输入文本时，我无法更改文本。我什至似乎都无法集中精力。似乎它的可读性或禁用。$（" .sr-label"）。live（当我尝试在文本字段中单击时，"单击"仍在调用。我需要做某种unblind吗？

感谢您的任何帮助

<ul>
  <li><span class='sr-label'>label 1</span></li>
  <li><span class='sr-label'>label 2</span></li>
</ul>

我的JS看起来像

$( ".sr-label" ).live("click", function(event){    
     console.log("sr-label");
     var $item = $( this ),
     $target = $( event.target );
     var $pitem = $item.parent();
     newHTML  = '<input id="label_'+$pitem.attr('id')+'" type="text" size="30" '+
                 ' value="'+$item.text()+'"><input class="saveedit" '+
                 ' id="save_'+$pitem.attr('id')+'" type="button" value="save">'+
                 ' <input id="canedit" type="button" value="cancel">';
     $item.html(newHTML);
     return false;
 });

jsfiddle示例

Answer 1

我的小提琴应该完成工作。

$handler = function(e) {
    $.tempNamespace = { oldText : $(this).text() }
    $item = $(this);
    $parent = $item.parent();
    $('.sr-label').unbind('click');
    $newHTML = "<input id='textEdit' type='text' value='" + $item.text() + "'><button id='saveEdit'>Save</button><button id='cancelEdit'>Cancel</button>";  
    $item.html($newHTML);
};
$('.sr-label').click($handler);

$('li').on('click','#saveEdit',function(){
    $newText = $(this).prev().val();
    $(this).parent().html($newText);    
    $('.sr-label').click($handler);
});
$('li').on('click','#cancelEdit',function(){
    console.log();
    $(this).parent().html("<span class='sr-label'>" + $.tempNamespace.oldText + "</span>");    
    $('.sr-label').click($handler);
});

Answer 2

单击跨度内部元素上的事件将传播到跨度，并导致处理程序再次运行。并且您的处理程序每次运行时都会替换整个跨度内容。因此，并不是说输入是已阅读或禁用的，而是单击它删除并重新创建它。

您会注意到，如果您使用键盘进入输入，则可以输入其中，因为KeyPresses不会触发您的点击处理程序。

"我需要做某种解链或其他事情吗？"

好吧，您不能以阻止其应用于该类而不是其他类别的某些元素的方式真正解开.live()。如果您将单个处理程序与.click()，.bind()或.on()的未延长形式绑定

您可以做的是更改选择器，以便它仅适用于没有任何孩子输入元素的元素：

$(".sr-label:not(:has(input))").live("click", function(event){

演示：http：//jsfiddle.net/h2ncm/2/

但是，您应该注意.live()已弃用，因此（除非您出于某种原因遇到了真正旧版本的jQuery），则应切换到.on()方法的委派版本：

$(document).on("click", ".sr-label:not(:has(input))", function(event){  

单击 document时，jQuery测试它是否在与第二个参数中的选择器匹配的元素上，如果这样称呼您的函数（否则什么都不做）。请注意，理想情况下，您不会使用document，您将使用一个更接近有关元素的元素，例如，您的包含ul元素。

演示：http：//jsfiddle.net/h2ncm/1/

这等同于在处理程序中添加简单的测试，如果单击跨度已经包含输入：

if ($item.find("input").length)
   return;

演示：http：//jsfiddle.net/h2ncm/