Onclick + set attr 检查动态 DOM 元素不起作用 [重复]

Posted 2023-05-09

【中文标题】Onclick + set attr 检查动态 DOM 元素不起作用 [重复]

【英文标题】：Onclick + set attr checked on dynamic DOM element not working [duplicate]

【发布时间】：2021-09-11 14:15:29

【问题描述】：

我已经写了一些语法，如果元素不是 DOM，它是 WORK，但是当通过将一些 html 附加到某个 div 来添加新的 DOM 元素时，该语法将不适用于新元素。

请看这段代码，我很困惑

$('.undistributed-row-tr').each(function() 
    $(this).on('click', function() 
        if($(this).find('.undistributed-check-one').is(":checked"))
            $(this).find('.undistributed-check-one').prop('checked', false);
        else
            $(this).find('.undistributed-check-one').prop('checked', true);
        
    )
)

我正在使用 Ruby on Rails 和 jQuery。谢谢！

详细代码和demo，请点击此链接：

https://jsfiddle.net/L9akuchb/2/

【问题讨论】：

请访问help center，使用tour查看内容和How to Ask。做一些研究，搜索关于SO的相关主题；如果您遇到困难，请发布您尝试的minimal reproducible example，注意输入和预期输出，最好在Stacksnippet

这是什么意思：“如果元素不是 DOM” ???

对不起，我对 DOM 元素的了解是通过 'append' 方法添加的元素或仅存储在 jquery/javascript 中的某些元素

我想你的意思是新添加的元素没有附加必要的监听器？

据我了解，您的事件侦听器不适用于动态添加的内容。如果您在开始时附上这些，它们很可能不会。在添加动态内容时，也会向它们添加事件侦听器。或者在将所有元素添加到 DOM 后运行此函数。

【参考方案1】：

不需要每个都使用

确保delegate if dynamically added - 这里我从表中委托，假设它是静态的并且它的 ID 是 tableID

如果单击复选框，则无法从行中切换复选框

$('#undist').on('click', '.undistributed-row-tr', function(e) 
  if ($(e.target).is('[type=checkbox]')) return;
  const $chk = $(this).closest('tr').find('.undistributed-check-one');
  const checked = $chk.prop('checked')
  $chk.prop('checked', !checked)
);

这是一个 jsfiddle：https://jsfiddle.net/mplungjan/cyu467d1/

$('#undist').on('click', '.undistributed-row-tr', function(e) 
  if ($(e.target).is('[type=checkbox]')) return;
  const $chk = $(this).closest('tr').find('.undistributed-check-one');
  const checked = $chk.prop('checked')
  $chk.prop('checked', !checked)
);
$('#undist').on('click', function() 
  const len = $('.undistributed-check-one:checked').length;
  $('#move-to-distributed').prop('disabled', len === 0)
);

$('#dist').on('click', '.distributed-row-tr', function(e) 
  if ($(e.target).is('[type=checkbox]')) return;
  const $chk = $(this).closest('tr').find('.distributed-check-one');
  const checked = $chk.prop('checked')
  $chk.prop('checked', !checked)

);
$('#dist').on('click', function() 
  const len = $('.distributed-check-one:checked').length;
  $('#move-to-undistributed').prop('disabled', len === 0)
);

$('#undistributed-check-all').on('change', function() 
  $('.undistributed-check-one').prop('checked', this.checked);
);
$('#distributed-check-all').on('change', function() 
  $('.distributed-check-one').prop('checked', this.checked);
);

$('#move-to-undistributed').on('click', function() 
  $('.distributed-row-tr').find(':checked').each(function() 
    $(this).closest('tr').appendTo('.undistributed-table-body')
  );
)

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<div class="pt-6">
  <!-- card -->
  <div class="bg-white px-6 py-6 rounded-md shadow w-full inline-flex mt-4 font-poppins">
    <div class="flex w-full space-x-2">
      <div class="w-4/5">
        <table id="undist" class="st-table w-full">
          <thead>
            <tr>
              <th class="text-left font-bold rounded-tl-lg">
                <input id="undistributed-check-all" type="checkbox" class="cursor-pointer rounded">
              </th>
              <th class="pl-0 text-left font-bold">STUDENT ID</th>
              <th class="pl-0 text-left font-bold rounded-tr-lg">NAME</th>
            </tr>
          </thead>
          <tbody class="undistributed-table-body">
            <tr class="undistributed-row-tr bg-gray-50 hover:st-bg-color-secondary-i hover:text-white p-0 cursor-pointer">
              <td class="">
                <input type="checkbox" name="" class="undistributed-check-one cursor-pointer rounded" value="1">
              </td>
              <td class="pl-0">
                <input type="text" class="border-0 font-bold p-0 bg-transparent cursor-pointer focus:ring-0 text-sm w-28" value="IIECRI-B2-0000" readonly>
              </td>
              <td class="pl-0">
                <input type="text" class="border-0 p-0 bg-transparent cursor-pointer focus:ring-0 text-sm w-full" value="MUHAMMAD ROBBI ZsadadsaULFIKAR" readonly tooltip="a">
              </td>
            </tr>
            <tr class="undistributed-row-tr bg-gray-50 hover:st-bg-color-secondary-i hover:text-white p-0 cursor-pointer">
              <td class="">
                <input type="checkbox" name="" class="undistributed-check-one cursor-pointer rounded" value="1">
              </td>
              <td class="pl-0">
                <input type="text" class="border-0 font-bold p-0 bg-transparent cursor-pointer focus:ring-0 text-sm w-28" value="IIECRI-B2-0000" readonly>
              </td>
              <td class="pl-0">
                <input type="text" class="border-0 p-0 bg-transparent cursor-pointer focus:ring-0 text-sm w-full" value="MUHAMMAD ROBBI ZsadadsaULFIKAR" readonly tooltip="a">
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="w-1/5">
        <div class="space-y-2">
          <div>
            <button id="move-to-undistributed" class='st-bg-color-primary hover:st-bg-color-secondary focus:outline-none transition duration-300 text-4xl cursor-pointer text-white w-full rounded-md shadow font-light disabled:cursor-not-allowed disabled:opacity-50'
              disabled>
                           &lt;
                        </button>
          </div>
        </div>
      </div>

      <div class="w-4/5">
        <table id="dist" class="st-table w-full">
          <thead>
            <tr>
              <th class="text-left rounded-tl-lg">
                <input id="distributed-check-all" type="checkbox" class="cursor-pointer rounded">
              </th>
              <th class="pl-0 text-left font-bold">STUDENT ID</th>
              <th class="pl-0 text-left font-bold rounded-tr-lg">NAME</th>
            </tr>
          </thead>
          <tbody class="distributed-table-body">
            <tr class="distributed-row-tr bg-gray-50 hover:st-bg-color-secondary-i hover:text-white p-0 cursor-pointer">
              <td class="">
                <input class="distributed-check-one cursor-pointer rounded" type="checkbox" name="" value="1">
              </td>
              <td class="pl-0">
                <input type="text" class="border-0 font-bold p-0 bg-transparent cursor-pointer focus:ring-0 text-sm w-28" value="IIECRI-B2-0000" readonly>
              </td>
              <td class="pl-0 ">
                <input type="text" class="border-0 p-0 bg-transparent cursor-pointer focus:ring-0 text-sm w-full" value="MUHAMMAD ROBBI ZsadadsaULFIKAR" readonly tooltip="a">
              </td>
            </tr>
            <tr class="distributed-row-tr bg-gray-50 hover:st-bg-color-secondary-i hover:text-white p-0 cursor-pointer">
              <td class="">
                <input class="distributed-check-one cursor-pointer rounded" type="checkbox" name="" value="1">
              </td>
              <td class="pl-0">
                <input type="text" class="border-0 font-bold p-0 bg-transparent cursor-pointer focus:ring-0 text-sm w-28" value="IIECRI-B2-0000" readonly>
              </td>
              <td class="pl-0 ">
                <input type="text" class="border-0 p-0 bg-transparent cursor-pointer focus:ring-0 text-sm w-full" value="MUHAMMAD ROBBI ZsadadsaULFIKAR" readonly tooltip="a">
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

【讨论】：

等我先试试

将#tableId 更改为相关行的静态容器的ID

还是不行，先生，之前很抱歉，我在jsfiddle.net/L9akuchb/2添加了我的应用演示

jsfiddle.net/mplungjan/cyu467d1

@mrobbizulfikar 查看更新