javascript - 使用 jQuery 使动态元素可选择

Question

我正在尝试使项目 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();
}); 

我无法找出错误。

Answer 1

首先交叉检查您是否有正确的 jQuery 版本并从 here 下载它

代码的问题

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

是这样的:

$(this).selectable();

仅当您点击outerUL 下的某个li child 时才会被调用。因此，您的第一次点击不会选择任何元素，而只会让元素准备就绪。

第二个问题在这个 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 的 child 可选择。