0

I have a form with a select list, and Jquery tying an onChange handler to that select. The handler is never called. On the Jquery side, I've tried these:

$("#dateShortcuts").on("change", function() { ... });
$("#dateShortcuts").change(function() { ... });
$("#dateShortcuts").on("change", myPredefinedFunc());
$(document.body).on("change", "#id", function() { ... });
$("#parentForm").on("change", "#dateShortcuts", function() { ... });

No matter what I try, I can't get the event handler to fire. My function is currently just alerting a string, so I know it when it works, but eventually it'll be adjusting two date pickers. My select list:

<select id="dateShortcuts" name="dateShortcuts">
<option value="-5">Since Sunday (last 5 days)</option>
<option value="0">Today Only</option>
<option value="-20">Days since May 1</option>
<option value="-1">Yesterday and Today</option>
<option value="-30">Last 30 Days</option>
</select>

I really don't know what else to try at this point. Everything I can find online says that one of those should work. I know Jquery itself is working, because it handles a lot of other tasks on the same page and does them all perfectly. I should also say that the samples I've already tried are all inside $(document.ready), where I (successfully) have onChange handlers for some text fields in the same form. Everything else is fine, it's just this select list that isn't working right. I've tested it on IE and Firefox. Thanks for any suggestions.

AH16
  • 337
  • 1
  • 2
  • 13
  • 3
    Is your jQuery that installs the event handler running in the `` section of the document (which would be before the DOM element exists)? Try `console.log($("#dateShortcuts").length)` to see if your jQuery object has anything in it. – jfriend00 May 20 '16 at 16:45
  • Are there any errors in your console? – gdros May 20 '16 at 16:49
  • Thanks for the suggestions so far. The only one I hadn't tried is $(dobument).on("change"); which didn't work either. :( No, JS isn't generating this element, it's in place when the page loads. Change events fire for the other form elements, too. – AH16 May 20 '16 at 19:14

4 Answers4

0

Try this one

$(document).on("change", "#dateShortcuts", function() {
//your code here
});
Marvin Medeiros
  • 202
  • 4
  • 22
0

Try this one

$(function(){
   $(document).on("change", "#dateShortcuts", function() {
   //do something here
   });
});
benson
  • 58
  • 8
0

I run in the same problem, if the javascript code run not inside the 

$(document).ready(function() {
   ... 
});

block or the <select> is maybe created using javascript. I could solve it using:

$('#dateShortcuts').on('change', document, function() {
   // your code here...
    ... 
});
bohrsty
  • 406
  • 6
  • 17
-1

Well, don't know much about JQuery, but this looks like the basic one (taken from w3schools):

$("#select").change(function(){

    alert("The text has been changed.");
});

Question, is "dateShortcuts" created before your code? That could be the problem. If not, you could put your function inside a try and catch:

function doSomething(){

    try{

        alert('IN');
        //do something here
    }

    catch(e){

        alert(e.message);
    }
}

If it displays an error, voilá. If not, then you might have a syntax error outside the function (notice I put an alert to see if the function was really running).

Hope it helps.

cthefinal
  • 79
  • 1