jquery+;jeditable,输入字段赢得';双击另一个可编辑区域时不会模糊

jquery+;jeditable,输入字段赢得';双击另一个可编辑区域时不会模糊,jquery,firefox,jeditable,Jquery,Firefox,Jeditable,我正在创建一个小页面,在这个页面中,用户可以在jeditable/jquery的帮助下修改类别和项目的名称 该脚本可以正常工作,但在Firefox中的行为有点奇怪。如果我双击我的可编辑范围,它将替换为输入字段。然后,如果我将注意力集中在除另一个可编辑范围之外的其他元素上,它将消失。我还应该注意,光标第一次进入输入框时就消失了 如果我想更改输入字段,我必须再次将焦点放在它上,然后单击其他地方 它在IE中运行良好 以下是我的jquery定义: $(document).ready(function()

我正在创建一个小页面,在这个页面中,用户可以在jeditable/jquery的帮助下修改类别和项目的名称

该脚本可以正常工作,但在Firefox中的行为有点奇怪。如果我双击我的可编辑范围,它将替换为输入字段。然后,如果我将注意力集中在除另一个可编辑范围之外的其他元素上,它将消失。我还应该注意,光标第一次进入输入框时就消失了

如果我想更改输入字段,我必须再次将焦点放在它上,然后单击其他地方

它在IE中运行良好

以下是我的jquery定义:

$(document).ready(function(){
    //this will be executed once the dom is loaded

    $(".categories").sortable({
                                                    connectWith: ".categories",
                                                    dropOnEmpty: true,
                                                    tolerance: "pointer",
                                                    cancel: ".sections"
                                                    }).disableSelection();

    $(".sections").sortable({
                                                    connectWith: ".sections",
                                                    items: "li:not(.empty)",
                                                    dropOnEmpty: true
                                                    }).disableSelection();                              

    $(".section_edit").editable("serve_edit_section_request.php", { 
      tooltip: "Click to edit...",
      select: true,
      style: "inherit",
      cssclass: "edit_input_box",
      event: "dblclick",
      id: this.id,
      name: "section_name",
      onblur: "cancel"  
  })

  $(".category_edit").editable("serve_edit_category_request.php", { 
      tooltip: "Click to edit...",
      select: true,
      style: "inherit",
      cssclass: "edit_input_box",
      event: "dblclick",
      id: this.id,
      name: "category_name",
      onblur: "cancel"  
  })

});
我的清单是:

<ul class='categories'>
  <li id='1' class='category'><span id='edit_1' class='category_edit'>Category 1</span>
    <ul id='cat_1' class='sections'>    
      <li class='empty'></li>   
      <li id='20' class='section'><span id='edit_20' class='section_edit'>My Section 1</span></li>
    </ul>
  </li>
  <li id='2' class='category'><span id='edit_2' class='category_edit'>Category 2</span>
    <ul id='cat_2' class='sections'>    
      <li class='empty'></li>   
      <li id='21' class='section'><span id='edit_21' class='section_edit'>My Section 2</span></li>  
      <li id='22' class='section'><span id='edit_22' class='section_edit'>My Section 3</span></li>
    </ul>
  </li>
  <li id='3' class='category'><span id='edit_3' class='category_edit'>Category 3</span>
    <ul id='cat_3' class='sections'>    
      <li class='empty'></li>   
      <li id='23' class='section'><span id='edit_23' class='section_edit'>My Section 4</span></li>
    </ul>
  </li>
  <li id='4' class='category'><span id='edit_4' class='category_edit'>Category 4</span>
    <ul id='cat_4' class='sections'>    
      <li class='empty'></li>   
      <li id='809' class='section'><span id='edit_809' class='section_edit'>My Section 5</span></li>
    </ul>
  </li>
</ul>
  • 类别1
    • 我的第一区
  • 第2类
    • 我的第二节
    • 我的第三节
  • 类别3
    • 我的第四节
  • 类别4
    • 我的第五组
(请原谅jquery内容的糟糕标签,我不明白为什么它会偶尔出现)


谢谢你的帮助!:)

我遇到了完全相同的问题:

该问题是由disableSelection()引起的。sortable()的常用用法不会使用textareas,因此大多数人不会发现以下微妙之处:

disableSelection()在FireFox中使用CSS特性,因此所有的效果都会在您应用disableSelection()的所有子代中感受到。因为您只想影响直接子级(就像sortable()只作用于直接子级一样),所以应该这样做:

$(".categories").sortable({
    connectWith: ".categories",
    dropOnEmpty: true,
    tolerance: "pointer",
    cancel: ".sections"
});
$(".categories > *").disableSelection();


(从jQuery文档中):“注意:当父()将查看所有祖先时,子()将只考虑即时子元素。”“/P>< P>我有完全相同的问题:

该问题是由disableSelection()引起的。sortable()的常用用法不会使用textareas,因此大多数人不会发现以下微妙之处:

disableSelection()在FireFox中使用CSS特性,因此所有的效果都会在您应用disableSelection()的所有子代中感受到。因为您只想影响直接子级(就像sortable()只作用于直接子级一样),所以应该这样做:

$(".categories").sortable({
    connectWith: ".categories",
    dropOnEmpty: true,
    tolerance: "pointer",
    cancel: ".sections"
});
$(".categories > *").disableSelection();


(从jQuery文档中):“注意:当PARTES()将查看所有祖先时,子()将只考虑即时子元素。”“/p>”,我将引发提交动作的事件更改为单击,而不是双击,它消除了奇怪的行为。脚本工作,我认为它更直观的单点击,但我有一种挥之不去的感觉,问题是由于我的一个错误,而不是JQuery。。。希望将来它不会咬我的屁股:)我将触发提交操作的事件改为单击一次,而不是双击,从而消除了这种奇怪的行为。脚本工作,我认为它更直观的单点击,但我有一种挥之不去的感觉,问题是由于我的一个错误,而不是JQuery。。。希望将来它不会咬我的屁股:)