2

アイテム1、アイテム2、アイテム3を選択可能にしようとしています。

HTML: 

<div id="container">
   <ul id="outerUL">                   //static 
       <li id="outerLI">              //dynamic
           <ul id="innerUL">          //dynamic
              <li>Item 1</li>         //dynamic
              <li>Item 2</li>         //dynamic
              <li>Item 3</li>         //dynamic
           </ul>
       </li>   
   </ul>
</div>

jQuery:

$("#outerUL").delegate('li','click',function(event) {
        $(this).selectable();
});

エラーを見つけることができません。

4

5 に答える 5

2

最初に、適切なバージョンの jQuery があるかどうかを確認し、ここからダウンロードします

コードの問題

$("#outerUL").delegate('li','click',function(event) {
    $(this).selectable();
});

それは：

$(this).selectable();

li childの下のいくつかをクリックしたときにのみ呼び出されますouterUL。したがって、最初のクリックでは要素を選択するのではなく、要素を選択できるようにするだけです。

2 番目の問題は、この HTML スニペットにあります。

 <ul id="outerUL">                   //static 
   <li id="outerLI">              //dynamic
       <ul id="innerUL">          //dynamic
          <li>Item 1</li>         //dynamic
          <li>Item 2</li>         //dynamic
          <li>Item 3</li>         //dynamic
       </ul>
   </li>

あなたのJavaScriptコードによると、の子であるすべての要素#outerULが選択可能でなければなりません。そのため、 の子が初めて#outerULクリック されると、子を選択可能$(this).selectable();にするステートメントが呼び出されます。outerLIその後のクリックで、jQuery のselectable()関数が呼び出され、outerLI要素全体が選択されます。

これで問題が解決すると思います：

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

の子のみを#innerUL選択可能にします。

于 2013-12-02T12:50:15.830 に答える
0

これを試して：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Selectable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

  <style>
  #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: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
  </style>
  <script>
  $(function() {
    $( "#selectable" ).selectable();
  });
  </script>
</head>
<body>

<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>


</body>
</html>

または、ここをお読みください。あなたが好きだといいけど！

于 2013-12-02T10:05:43.750 に答える
0

jQuery on() を試してください:

$(document).on('click','#outerUL li',function(event) {
    $(this).selectable();
});
于 2013-12-02T09:56:01.480 に答える
0

jQuery API ドキュメントでは、以下を読むことができます。

jQuery 1.7 の時点で、.delegate() は .on() メソッドに取って代わられました。

使用する必要がありますjQuery.on()

$("#outerUL").on('click', 'li', function(event) {
    $(this).selectable();
});
于 2013-12-02T09:56:34.840 に答える