CODEWITHSUNDEEP
jquery
GrumpyCrouton
GrumpyCrouton

Reputation: 8621

Running jquery from inside modal

I'm trying to run jquery from inside my modal window, but it doesn't seem to be doing anything. Here is my jquery:

$('select').on('change', function() { alert( this.value ); })

The code should alert the browser what a dropdown was changed to when it changes.

My dropdowns are generated based on results from an sql table like so 

<div class="input-group">
    <span class="input-group-addon" id="sizing-addon1"><?=$value[1];?></span>
    <select id="myChange" name="goneTeammates[<?=$uniqueLoop;?>]" class="myChange form-control">
        <option class="white" value="">Attended</option>
        <option class="red" value="<?=$value[0];?>|A">Absent</option>
        <option class="blue" value="<?=$value[0];?>|V">Vacation/Holiday</option>
    </select>
</div>

I'm not sure why I can't get this very simple thing to run, it shouldn't be this difficult.

P.S I know that jQuery is running, because the dropdowns are visible in a modal window that works properly.

I get no errors on console.

Upvotes: 1

Views: 82

Answers (1)

jumpdart
jumpdart

Reputation: 1712

the elements do not exist yet when this line gets executed

try 

   $( document ).on('change', 'select', function(){
       alert ( this.value );
   });

and if you are going to just throw it on the document or something like that, try and use a more specific class for the selector and clear the event before you ass them. This prevents you duplicating the handler and end up with crazy stuff happening if that code gets executed more than once. Would look something like the following:

   $( document ).off('change', '.myCoolSelect');
   $( document ).on('change', '.myCoolSelect', function(){
       alert ( this.value );
   });

But you dont have to use document. Any parent node that you know will exist you can add the handlers.

Upvotes: 1

Related Questions