jquery selectを使用しているクリック可能な表の行？

Question

jquery selectable関数でクリック可能な表の行を操作しようとしていますが、問題が発生しています。それはli要素とうまく動作しますが、テーブルを使用しようとするとすぐにclickイベントが機能しなくなります。ドラッグして作品を選択しますが、実際にはクリックする必要があります。ここに私のコードは次のとおりです。

$(function() { 
 
    $("#selectable").selectable(); 
 
});

#feedback { 
 
    font-size: 1.4em; 
 
} 
 
#selectable .ui-selecting { 
 
    background: #FECA40; 
 
} 
 
#selectable .ui-selected { 
 
    background: #F39814; 
 
    color: white; 
 
} 
 
#selectable { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
#selectable tr { 
 
    margin: 0px; 
 
    padding: 0.4em; 
 
    font-size: 1em; 
 
    height: 10px; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> --> 
 

 
<table id="selectable" style="width:100%"> 
 
    <tr class="ui-widget-content"> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr class="ui-widget-content"> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
</table>

誰もがクリック取得またはCtrl +上の例で作業をクリックする方法を知っていますか？

Answer 1

filterをselectable()に追加する必要があります。

filterのドキュメントを参照してください。あなたのケースのためにフィルタを使用

$(function() { 
 
    $("#selectable").selectable({filter: 'tr'}); 
 
});

#feedback { 
 
    font-size: 1.4em; 
 
} 
 
#selectable .ui-selecting { 
 
    background: #FECA40; 
 
} 
 
#selectable .ui-selected { 
 
    background: #F39814; 
 
    color: white; 
 
} 
 
#selectable { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
#selectable tr { 
 
    margin: 0px; 
 
    padding: 0.4em; 
 
    font-size: 1em; 
 
    height: 10px; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> --> 
 

 
<table id="selectable" style="width:100%"> 
 
    <tr class="ui-widget-content"> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr class="ui-widget-content"> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
</table>

Answer 2

：私はあなたの例を更新した

、それだけで小さな変更です。 http://api.jquery.com/filter/

$(function() { 
 
    $("#selectable").selectable({filter: 'tr'}); 
 
});

#feedback { 
 
    font-size: 1.4em; 
 
} 
 
#selectable .ui-selecting { 
 
    background: #FECA40; 
 
} 
 
#selectable .ui-selected { 
 
    background: #F39814; 
 
    color: white; 
 
} 
 
#selectable { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
#selectable tr { 
 
    margin: 0px; 
 
    padding: 0.4em; 
 
    font-size: 1em; 
 
    height: 10px; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> --> 
 

 
<table id="selectable" style="width:100%"> 
 
    <tr class="ui-widget-content"> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr class="ui-widget-content"> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
</table>