1

I'm trying to invoke a function with JQuery on windows.ready. my function:

$(function() {
    $(".select2-selection").on("click",function() {
       $(this).closest("tr").find('input[type="radio"]').prop('checked', true);
       console.log('great success');
    })
});

I'm getting nothing at the console when clicking select2-selection element but when I paste the same code (minus line 1 & 5):

$(".select2-selection").on("click",function() { $(this).closest("tr").find('input[type="radio"]').prop('checked', true);

inside the console I get the functionally I'm looking for which tells me that the function isn't invoked correctly.

If the HTML help in some way:

<tr>
   <td><input type="radio" name="list" value="5" onclick="showList('kaytana')"></td>
   <td> למשתתפי קייטנה</td><td>
   <select id="kaytana" style="width:100%" class="listop js-example-basic-single select2-hidden-accessible" name="select5" data-select2-id="kaytana" tabindex="-1" aria-hidden="true">
     <option value="" data-select2-id="8"></option>
     <option value="all" data-select2-id="66">לכל משתתפי הקייטנות</option>
   </select>
   <span class="select2 select2-container select2-container--default select2-container--below select2-container--open select2-container--focus" dir="rtl" data-select2-id="7" style="width: 100%;">
       <span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-kaytana-container" aria-owns="select2-kaytana-results"><span class="select2-selection__rendered" id="select2-kaytana-container" role="textbox" aria-readonly="true" title=""></span>
         <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
         </span>
       </span>
   <span class="dropdown-wrapper" aria-hidden="true"></span>
   </span></td>
</tr>
atarixdev
  • 13
  • 5
  • 1
    Is the `.select2-selection` element added to the DOM dynamically? – Rory McCrossan Mar 14 '19 at 13:05
  • https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – epascarello Mar 14 '19 at 13:06
  • The code you've posted in the question works: https://jsfiddle.net/9fsaj1L4/. Note that it doesn't appear that the `.select2-selection` element has any content in it, which may be part of the problem. I changed this in the example by placing the text 'Foo' in the element – Rory McCrossan Mar 14 '19 at 13:12
  • I feel like `.select2-selection` comes form the [Select2 plugin](https://select2.org/getting-started/basic-usage)... In this case, the element is dynamically created. – Louys Patrice Bessette Mar 14 '19 at 13:20
  • Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Louys Patrice Bessette Mar 14 '19 at 13:20

0 Answers0