

現在Webaアプリケーションを作成しながらプログラミングの学習をしているものです。  
jQueryのSortableを使用して、li要素の並び替えを行なっております。  
下記のソースコードは、要素をドラッグして任意に並び替えた後、要素クリックでコンソールに、innerHTMLを出力するコードになります。  
しかし、要素を並び替えた後、クリックすると違う要素の情報が取得されてしまいます。どのような実装をすれば良いかご教授いただければ幸いです。

for文はページを開いた一度目しか実行されないため、要素の順番が変わるとそこに誤差が生じているのだと思いますが、上記のソースコード以外での実装が調べても見当つかない状態です。

[code]

       $(function () {
            // リストを並べ替え可能に
            $('#sortable').sortable({
              // updateで並べ替えるたびに更新
              update: function () {
                // toArrayで現在の順番を取得し出力
                $('#log').text($('#sortable').sortable('toArray'));
              },
            });
          });
          window.addEventListener('load', function () {
            let sortable = document.getElementById('sortable');
            let liClass = document.getElementsByClassName('liClass');
    
            for (let i = 0; i < liClass.length; i++) {
              liClass[i].addEventListener('click', function (e) {
                console.log(`${liClass[i].innerHTML}`);
              });
            }
          });
[/code]

[code]

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>サンプル Sortable</title>
        <!-- jQuery、jQuery UIの読み込み -->
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <!-- Sortableの実装 -->
        <body>
          <!-- リストにid属性を追加 -->
          <ul id="sortable">
            <li class="liClass" id="1">項目1</li>
            <li class="liClass" id="2">項目2</li>
            <li class="liClass" id="3">項目3</li>
            <li class="liClass" id="4">項目4</li>
            <li class="liClass" id="5">項目5</li>
          </ul>
          <p>リストの順番は「<span id="log"></span>」です</p>
        </body>
         </head>
    </html>
[/code]


CC BY-SA 4.0
2022-09-17T09:00:38.000
91143
2022-09-17T17:36:23.170
2022-09-17T11:00:47.730
30760
30760
question
javascript html jquery jquery-ui
jQuery UIのSortableを用い、li要素並び替え後にも要素の情報を取得したい


以下で解決いたしました。

[code]

      $(function () {
         // sortable 設定
          $('#sortable').sortable({
            update: function () {
              $('#log').text($(this).sortable('toArray'));
            },
          });
          // リストアイテムにクリックハンドラ設定
          $('.liClass').on('click', function() {
            console.log($(this).html());
          });
        });
     
[/code]


CC BY-SA 4.0
2022-09-17T17:36:23.170
91147
2022-09-17T17:36:23.170
30760
91143
answer