0

I have the following:

$(document).ready(function(){
  var span = $('#multiple_group_select_chosen span:first');
  span.on('DOMSubtreeModified', function(){
    console.log('bla');
    if (['No groups in this year', '', 'Now please select a group', 'Please select a'].includes(span.text())) {
      $('#classes').disabled = true;
    } else {
      $('#classes').disabled = false;
    }
  });
});

When I call 

$('#multiple_group_select_chosen span:first').text()

from the console it returns the value selected from the dropdown, and this changes as the dropdown selection changes. How can I detect when this happens? At the moment there is no console.log of 'bla' occuring...

Thanks in advance.

EDIT: HTML

<div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 100%;" title="" id="multiple_group_select_chosen">
  <a class="chosen-single">
    <span>DROPDOWN TEXT</span>
    <div><b></b></div>
  </a>
</div>

I don't have much control over how this html is coming out

Mark
  • 6,112
  • 4
  • 21
  • 46

1 Answers1

0

I could be wrong but there might be a very simple solution here. Instead of taking span as a var and then binding the on eventhandler to that variable, try binding the event directly to the node like $('#multiple_group_select_chosen span:first').on('event', function() { ... });

By assigning the element to a variable you might be looking for events on that "saved" version of the element instead of the actual DOM element on the page. Someone with a little more knowledge might be able to verify this.

Peter Van Drunen
  • 543
  • 5
  • 15
  • I've tried changing the spans to the $('#) objets with no joy – Mark Sep 14 '17 at 14:59
  • Alright, well in that case here is a similar issue that was raised awhile back maybe you can find something useful there: [Link](https://stackoverflow.com/questions/10958529/jquery-how-to-handle-change-text-of-span) – Peter Van Drunen Sep 14 '17 at 15:03