1

我正在创建一个小页面，用户可以在其中借助 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>

（请原谅 jquery 东西的标签不好，我不明白为什么它偶尔会出现）

谢谢你的帮助！:)

4

1 回答 1

1

我有这个完全相同的问题：

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

disableSelection() 在 FireFox 中使用 CSS 特征，因此所有效果都会在您应用 disableSelection() 的所有后代中感受到。由于您只想影响直接子代（就像 sortable() 只作用于直接子代一样），您应该这样做：

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

或者

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

（来自 JQuery Docs：“另请注意：虽然 parents() 将查看所有祖先，但 children() 只会考虑直接子元素。”）

于 2010-01-15T17:04:23.013 回答