If change element in DOM with JS not working event

Question

I have a function that changes a table in a list, so far so good, but when the function changes in js it stops working, if I reload the page it works but if I change the DOM nothing. Can you help me?

$(document).ready(function() {
    $('#table-list tbody tr').click(function(event) {
        if(event.target.type == 'checkbox'){
        }else{
            $(':checkbox', this).trigger('click');
        }
    });

    $('#ul-list li').click(function(event) {
        var checkbox_type = $(event.target).find("input[type='checkbox']").attr('name');
        if(checkbox_type){
            $(':checkbox', this).trigger('click');
        }
    });

});

These are the two events that should always be active. But if I change the table to ul not it works

So let me explain better, I have a table like this:

<table id="table-list">
  <tbody>
    <tr>
      <td><input type="checkbox" name="1" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="3" /></td>
    </tr>
  </tbody>
</table>

Then by clicking on a button I convert it to a list by removing the table from the DOM and inserting this:

<ul id="ul-list">
    <li>
      <input type="checkbox" name="1" />
    </li>
    <li>
      <input type="checkbox" name="3" />
    </li>
</ul>

Now I want if I try to click on the list this function should start:

$('#ul-list li').click(function(event) {
        var checkbox_type = $(event.target).find("input[type='checkbox']").attr('name');
        if(checkbox_type){
            $(':checkbox', this).trigger('click');
        }
    });

instead no.

It is very unclear what you mean by `function changes in js it stops working,` and `I change the DOM nothing` . Please click edit then `[<>]` and provide a [mcve] — mplungjan, Mar 25 '20 at 13:46
```$(event.target).find("input[type='checkbox'")``` here you miss closing ] — Sajeeb Ahamed, Mar 25 '20 at 13:47
If you add new LIs later, you need to delegate: `$('#ul-list').on("click","li",function(event) {` — mplungjan, Mar 25 '20 at 13:48

mplungjan · Answer 1 · 2020-03-25T15:44:49.363

0

If you rewrite the DOM, you need to DELEGATE

$('#ul-list').on("click","li",function(event) {

I though you might need this - see the stopPropagation when the target is one of the checkboxes itself:

function findCheck(e) {
  const tgt = e.target;
  if (tgt.type && tgt.type === "checkbox") {
    e.stopPropagation()
  } else {
    const $row = $(e.currentTarget);
    $row.find("[type=checkbox]").each(function() {
      $(this).click();
      //$(this).attr("checked", !$(this).attr("checked"))
    });
  }
}

$(function() {
  let $ul = $("<ul/>", {
    id: "ul-list"
  });
  const $tbl = $("#table-list");
  $tbl.find("tr").each(function() {
    let $li = $("<li/>")
    $("td",this).each(function() {
      $li.append($(this).html())
    })
    $ul.append($li);
  })
  $tbl.replaceWith($ul)
  $('#ul-list').on("click", "li", findCheck)
})

tr {
  background-color: red
}

li {
  background-color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-list">
  <tbody>
    <tr>
      <td>1</td>
      <td><input type="checkbox" name="1" /></td>
      <td><input type="checkbox" name="2" /></td>
    </tr>
    <tr>
      <td>2</td>
      <td><input type="checkbox" name="3" /></td>
    </tr>
  </tbody>
</table>

edited Mar 25 '20 at 15:44

answered Mar 25 '20 at 14:21

mplungjan

169,008
28
173
236

edit my post with more info – Pandolfi Mar 25 '20 at 14:30
See my update. I actually already answered in a comment – mplungjan Mar 25 '20 at 14:35
I also tried this, but it doesn't work, maybe because I use the JS function inside a .js file? – Pandolfi Mar 25 '20 at 15:10
No. That would not be a problem unless you did not use the load event: `$(function() { });` – mplungjan Mar 25 '20 at 15:29
$ (function () {}); There is the inside of my .js file But it doesn't work the same... I use jquery 3.4.1 – Pandolfi Mar 25 '20 at 15:38
See update...... – mplungjan Mar 25 '20 at 15:44

If change element in DOM with JS not working event

1 Answers1