動的に生成されたリストを相互に排他的にする

Question

私は、オートコンプリートドロップダウンの一部として表示され、pluginによってダイナミックに生成される順序付けされていないリストをユーザインタラクションの後にDOMに表示します。問題のページでは、このリストは複数回レンダリングできます。私はリストを相互排他的にしたいので、あるアイテムが選択されたときに、それを新しいリストで選択することができなくなります。私が抱えている主な問題は、実際にイベントを実行するために実際に必要な要素にアクセスするのに苦労していることです。リストのために生成されたコードはそうのようなものです：私は基本的にliは、そのクラスでselect2-results__option--highlightedを持っているとき、それが再びレンダリングされるとき、それがリストから削除されるようにしたい

<span class="select2-container select2-container--default select2-container--open" style="position: absolute; top: 310px; left: 523.172px;"> 
    <span class="select2-dropdown select2-dropdown--below" dir="ltr" style="width: 144px;"> 
     <span class="select2-search select2-search--dropdown"> 
      <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox"> 
     </span> 
     <span class="select2-results"> 
      <ul class="select2-results__options" role="tree" id="select2-id_eventconfigstepkeycharacteristicfield_set-0-key_characteristic-results" aria-expanded="true" aria-hidden="false"> 
       <li class="select2-results__option" role="treeitem" aria-selected="true">Depot</li> 
       <li class="select2-results__option select2-results__option--highlighted" role="treeitem" aria-selected="false">Month</li> 
       <li class="select2-results__option" role="treeitem" aria-selected="false">bdfdf</li> 
      </ul> 
     </span> 
    </span> 
</span> 

。

$(document).on('click', '.select2-container.select2-container--default.select2-container--open', function() { 
    console.log('working'); 
}); 

を、これが働いているが、私はリストを取得することができなかった。これまでのところ私はjQueryイベントハンドラを追加することで、このへのアクセスを得ることができます。

Answer 1

あなたは他のすべての選択を解除するためにあなたのクリックハンドラを設定することができるはずです。

$(document).on('click', '.select2-container.select2-container--default.select2-container--open li', function() { 
    $('.select2-results__option--highlighted').removeClass('select2-results__option--highlighted'); 
    $(this).addClass('select2-results__option--highlighted'); 
}); 

あなたも、それを簡素化することができる場合がありますあなたがしたい場合は、

$(document).on('click', '.select2-container li', function() { 
    $('.select2-results__option--highlighted').removeClass('select2-results__option--highlighted'); 
    $(this).addClass('select2-results__option--highlighted'); 
}); 

そして、

$(document).on('click', '.select2-container li', function() { 
    $('.select2-results__option--highlighted').setStyle('display', 'none'); 
    $(this).setStyle('display', 'block'); 
});