Unable to reach an inlineformset delete checkbox with JQuery

Using Django Templates & Frontend
1

I am using an inlineformset with can_DELETE=True. When the user check a delete checkbox, I would like to warn him. Unfortunately the small Jquerry scripts doesn’t work (the one raised by any tag named “DELETE”. While it works for a checkbox outside the formset (rasied by a tag named “truc”.

Any idea?

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
        $('input[name*="truc"]').change(function () {
            alert("Checkbox cliquée. Name contient truc");
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {
          $('input[name*="DELETE"]').change(function () {
              alert("Checkbox cliquée. Name contient DELETE");
          });
      });
  </script>


<Div class="row">
  <form method="post">

    <input type="checkbox" name="truc" id="cbox">

    {% csrf_token %}
    {{ data_form_set.management_form }}
<br>
<br>
    <table class="table table-hover table-striped"
    data-toggle="table"
    data-pagination="true">
    <thead>
      <tr>
        <th>id</th>
        <th><i class='bx bx-trash nav_icon'></i></th>
        <th>Champ 1</th>
        <th>Champ 2</th>
      </tr>
    </thead>
    <tbody>

        {% for form in data_form_set %}
        <tr>
            <td>{{ form.id }}</td>
            <td>{{ form.DELETE }}</td>
            <td>{{ form.champ1 }}</td>
            <td>{{ form.champ2}}</td>                  
          </tr>
        {% endfor %}
    </tbody>
  </table>

    <br>
    <button name="enregistrer" type="submit" class="btn btn-primary">
    <i class='bx bx-save nav_icon'></i>
    Sauvegarder
    </button>
  </form>

  </form>
</div>
2

Examine the html that was rendered for the formset and verify that your selector is correct.

3

I changed the html to solve another issue (not displaying the form.id), and it happens the JQuery works now!!!