-1

I have a modal in Bootstrap 4 with multi tabs each formatted with tables. Data is added to the table from an ajax call and is not there at startup. I want to click a and highlight the with a background-color, but cannot get the code to fire. Extracted snippets of code are as follows: 

<head>
<style
    td.highlight {
      background-color:yellow;
    }
</style>
</head>
<body>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#getDetails">
  Open modal
</button>

  <!--  MODAL-->
  <div class="modal fade" id="getDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog roundbox shadow" role="document">
      <div class="modal-content" style="background-color:white;font-size:.85rem;">
        <div class="card" id="card2">
          <table width="100%">
            <tbody id="children">
              <tr height="24"><td>Children:</td><td>(none)</td></tr>
            <tbody>

          </table>
        </div>
        <div style="margin:10px;">
          <button type="button" class="btn btn-sm btn-danger" style="float:left;" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-sm btn-success" style="float:right;" onclick="saveDetails();">Submit</button>
        </div>
       </div>
    </div>
  </div>

 <script>
    $(function(){
      var code = '<tr height="24"><td>Children:</td><td class="kids" id="child0" data-id="2" data-gender="1"><span class="bname">SURNAME</span> John Ainsworth b.1945</td></tr>' + "\n"
       + '<tr height="24"><td></td><td class="kids" id="child1" data-id="1" data-gender="1"><span class="bname">SURNAME</span> David Neale b.1946</td></tr>' + "\n"
       + '<tr height="24"><td></td><td class="kids" id="child2" data-id="11" data-gender="1"><span class="bname">SURNAME</span> Phillip Robert b.1950</td></tr>' + "\n"
       + '<tr height="24"><td></td><td class="kids" id="child3" data-id="28" data-gender="0"><span class="bname">SURNAME</span> Margaret Lesley b.1951</td></tr>' + "\n";

      $('#getDetails table tbody#children').html(code);
    });

   // TOGGLE HIGHLIGHT
     $('td.kids').on("click", function(e) {
      if ($(this).hasClass("highlight")) {
        $(this).removeClass("highlight");
      } else {
        $(this).addClass("highlight");
      }
     });
  </script>
</body>

The "highlight" code is not firing. I have looked through previous answers to similar problems and tried everything suggested, but cannot get it to work.
Any suggestions?

miken32
  • 35,483
  • 13
  • 81
  • 108
John Emerson
  • 65
  • 1
  • 6
  • How is this a php question? – Funk Forty Niner Dec 03 '18 at 23:21
  • Look at your developer console. – Funk Forty Niner Dec 03 '18 at 23:23
  • Not sure if its just the snippet you have posted - but yuou have a typo in your style declaration - you are not closing the style tag. ... – gavgrif Dec 03 '18 at 23:24
  • Your listener needs to be added within the function that creates the td tags and after the tags are added to the DOM. – MichaelvE Dec 03 '18 at 23:28
  • The part that adds the rows with kids in it is in a document ready. The part that creatings the event listeners on the kids, is not. The elements will not exist when you try to create the binding. That part should also be in the document ready, after the rows are created. – Taplar Dec 03 '18 at 23:30
  • 1
    Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Taplar Dec 03 '18 at 23:31

1 Answers1

1

This is due to the fact that you are dynamically adding the element to the dom - so you need to delegate the click handler in order to apply the highlight class.

Also - you don't need the conditional logic to determine if the clicked element has the class - simply use toggleClass and it will add the class if its not there and remove it if it is there.

 $("body").on("click", "td.kids", function(e) {
  $(this).toggleClass("highlight")
 });

Also - not sure if its just the snippet you have posted - but yuou have a typo in your style declaration - you are not closing the style tag. 

...<style ... should be ...<style> ...
gavgrif
  • 13,077
  • 2
  • 17
  • 22