0

我正在使用 bootstrap select2 来提供可搜索的下拉菜单。数据是动态填充的。我想在所有 li 元素上都有一个自定义属性：

 $('#myselect').select2({
      data: myDataArray
 });

这完美地工作并呈现以下html：

<ul class="select2-results__options" role="tree" id="select2-myselect-results" aria-expanded="true" aria-hidden="false">
    <li class="select2-results__option" role="treeitem" aria-selected="false">item1</li>
    <li class="select2-results__option" role="treeitem" aria-selected="false">item2</li>
     <!-- etc, total of 77 items listed --> 
</ul>

在所有列表元素上，我想要一个属性。所以我想通了，当元素已经渲染时，我必须捕捉'select2：open'事件，然后使用jquery应用属性说：

 $("#myselect").on("select2:open", function () {
     console.log('open');
     var liElements = $('#select2-myselect-results li');
     console.log(liElements.length);
     liElements.attr('data-mydata', 'mydataa');
 });

事件正确触发。控制台显示首次打开：

open
1

控制台显示第二次打开，jquery 选择器似乎也在工作：（但为什么只有 2 次......？，无论如何）

open
77

li在这两种情况下元素都没有属性的主要问题data-mydata是我的目标。 附带的问题是为什么第一个 open 只有一个元素（即使是零也会更有意义......）

控制台上没有错误消息

4

1 回答 1

0

我发现：必须等待 DOM 事件完成。我认为这个想法对类似的情况很有用。使用 setTimeout 技巧（使用 0）在浏览器消息循环的下一次迭代中执行您的代码。

在实践中：

$("#myselect").on("select2:open", function () {
    setTimeout(function () {
        var liElements = $('#select2-myselect-results li');
        console.log(liElements.length);
        liElements.attr('data-mydata', 'mydataa');
    }, 0);
});

事件正确触发。控制台显示首次打开：

open
76

...并且属性在那里。

PS：这就解释了一个附带问题：为什么是第一次是1，第二次是77？因为那是 DOM 改变之前的状态。第二次 77 是第一次开幕的剩余部分，可能被删除以创建新的。

所以我们等待，然后将属性应用于创建新的...

于 2016-02-24T22:37:54.763 回答