0

我正在尝试使用 jquery 进行一些内联​​编辑。我遇到的问题是当我创建输入文本时，我无法更改文本。我什至无法集中注意力。它似乎是只读的或禁用的。$( ".sr-label" ).live("click" 当我尝试单击文本字段时仍然被调用。我需要做某种解除绑定或什么吗？

谢谢你的帮助 

<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 示例

4

2 回答 2

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);
});
于 2012-11-07T04:21:05.073 回答
0

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

您会注意到，如果您使用键盘进入输入，那么您可以输入它，因为按键不会触发您的点击处理程序。

“我需要做一些解绑什么的吗？”

好吧，您无法真正解除绑定.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/

这相当于在处理程序中添加一个简单的测试，如果单击的 span 已经包含输入，则不执行任何操作：

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

演示：http: //jsfiddle.net/H2ncm/

于 2012-11-07T03:46:41.727 回答