Jquery-ui可选问题

Question

我有一个关于jquery可选的问题，我有包含用户信息的div，这是我的div。

<div class="user-container" id="append_users">
     <div class="fc-event draggable-user" ondblclick="sys.callUserProfile('+user.id+')" id="user_'+user.id+'"style="z-index: 9999;"  onmousedown="sys.mouseDown()" onmouseup="sys.mouseLeave()">
            <div class="container-fluid">
                <input type="hidden" value="'+user.id+'" id="user_'+ user.id + '_value" class="userId">
             <div class="row">
             <div class="col-xs-3 avatar-col">
               <img src="'+getUserImage(user.avatar)+'"width="100%">
             </div>
             <div class="col-xs-9 data-col">
               <p class="fullName dataText" >'+user.fullName+'</p>
                <p class="usr_Gender dataText" >Male</p>
                 <div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
                  <p class="user_id" style="float:right;margin:3px">'+user.employee_id+'</p>
                 </div>
             </div>
           </div>
        </div>
</div>

我需要整个fc-事件div作为一个函数，所以带有id="append_users“的div应该包含可选择的类，而fc-事件类的div应该作为选择，我尝试了这样做。

( "#append_users" ).selectable();

但是所有的孩子都是ui-selectee类，它根本不起作用，所以我想做的是fc事件的div应该被看作是一个事件，我希望我很清楚，任何人都可以帮忙。

Answer 1

文档并没有非常清楚地说明这一点，但是从jQueryUI网站(http://jqueryui.com/selectable/)上的演示代码和描述可以看出，您执行“可选择”命令的元素是针对您想要选择的内容的容器。它将自动将该元素的所有子元素变成可以选择的东西。这是合乎逻辑的，因为通常您希望在一个列表中有几个可选择的项，并且能够选择一个或多个项来选择。

因此，如果您希望您的"append_users“元素是可选的，则必须使该元素的父元素成为”可选“命令的目标。您还没有展示父类是什么，所以为了示例的目的，我将假设它只是另一个<div>

HTML:

<div id="selectable">
  <div class="user-container" id="append_users">
    <div class="fc-event draggable-user"  id="user_1" style="z-index: 9999;">
        <div class="container-fluid">
            <input type="hidden" value="1" id="user_1_value" class="userId">
         <div class="row">
         <div class="col-xs-3 avatar-col">

           <img src="https://i.imgur.com/db4KgSp.png" width="100px">
         </div>
         <div class="col-xs-9 data-col">
           <p class="fullName dataText" >user.fullName</p>
            <p class="usr_Gender dataText" >Male</p>
             <div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
              <p class="user_id" style="float:right;margin:3px">user.employee_id</p>
             </div>
         </div>
       </div>
    </div>
  </div>
</div>

JavaScript:

$("#selectable").selectable();

有关工作演示，请参见http://jsfiddle.net/s6Lmy70b/2/。

(注:与您的标记相比，这是使用了非常小的调整标记，只是为了演示，使它更容易工作，但原则是相同的，无论确切的内容正在显示)