Onclick + set attr checked on dynamic DOM element not working

Question

I already wrote some syntax and it's WORK if the element is not DOM, but when the new DOM element added by appending some html to some div, the syntax won't work to the new element.

Please look at this code, i'm confused

$('.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);
        }
    })
})

I'am using Ruby on Rails and jQuery. Thank you!

For detail code and demo, please click this link:

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

Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) — mplungjan, Jun 29 '21 at 11:06
i'm sorry my knowledge about DOM Element is the element which added by 'append' method or some element which stored only at jquery/javascript — mrobbizulfikar, Jun 29 '21 at 11:08
I think you mean that newly appended elements don't have the necessary listener attached? — pilchard, Jun 29 '21 at 11:08
From what I understand your event listeners are not working for dynamically added content. They will most probably not if you attach these in the beginning. While adding dynamic content add event listeners to them too. Or run this function after all elements are added to DOM. — Tushar Shahi, Jun 29 '21 at 11:09
@pilchard yes, my newly appended elements not working with my current syntax — mrobbizulfikar, Jun 29 '21 at 11:09
@TusharShahi yeah thats the point, but i dont know how to 'add event listeners to them too' — mrobbizulfikar, Jun 29 '21 at 11:11
The most robust solution will be event delegation, some discussion here: [Behavior #2: Dynamic or Delegated Event Binding](https://stackoverflow.com/a/9730309/13762301) — pilchard, Jun 29 '21 at 11:11
sir i'm sorry, i've add my app demo here https://jsfiddle.net/L9akuchb/2/ — mrobbizulfikar, Jun 29 '21 at 11:34

mplungjan · Accepted Answer · 2021-06-29T13:32:52.907

No need to use each
Make sure to delegate if dynamically added - here I delegate from the table, assuming it is static and its ID is tableID
You cannot toggle the checkbox from the row if the checkbox is clicked

$('#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)
});

Here is a 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>

change #tableId to the ID of a static container of the rows in question — mplungjan, Jun 29 '21 at 11:13
still doesn't work sir, i'm sorry before, here i've add my app demo at https://jsfiddle.net/L9akuchb/2/ — mrobbizulfikar, Jun 29 '21 at 11:34

Onclick + set attr checked on dynamic DOM element not working

1 Answers1