0

$(document).ready(function(){
   alert("Hey remove this alert asap");
   console.log("I am ready now");
   $("#select-box").change(function(){
       console.log("I am in select box change");         
      alert("hello");
   });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select style="float:right;margin-right:10px;margin-top:5px" name="select-box" id="select-box" class=""><option value="">Select an option</option><option value="all">Select all</option><option value="none">Select none</option></select>

I am using jQuery on change event. Even if the option is changed the function is not getting triggered. No errors are showing up in developer tools as well. So i am struck here and not sure why the function is not getting triggered.

I am not able to see any console log messages or the alert as well. Can any one please correct me please.

Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
Rnga
  • 53
  • 6
  • It seems to be working as intended here: https://codepen.io/anon/pen/jmZqQZ?editors=1010 Are you loading in the box dynamically? – mrsq May 09 '17 at 21:57
  • You're more than likely not including jQuery check here: https://jsfiddle.net/nnje48bm/ – kawnah May 09 '17 at 21:57
  • Yep your code is working as others have pointed out. – Webbanditten May 09 '17 at 21:58
  • @Rnga check to see that you haven't loaded jquery multiple times - this sometimes mucks things up – Rachel Gallen May 09 '17 at 22:04
  • The code looks ok. Is this a stand-alone example or just a snipped from a larger code base? – doberkofler May 09 '17 at 22:04
  • Hi all. Thanks for the comments. Actually i am adding the select box dynamically from javascript. I have updated the code. Not sure if any of that is causing the problem. I have edited the HTML in the question. – Rnga May 09 '17 at 22:07
  • Its from the larger code base @materialdreams – Rnga May 09 '17 at 22:07
  • How do i check for that? Can you please let me know please? Also i have edited teh html can you please have a look? @RachelGallen – Rnga May 09 '17 at 22:08
  • If you are adding your box dinamically then you need to change the way you add the event listener to the element – Lixus May 09 '17 at 22:09
  • @Rnga look in your section of your html file to see that the link to jquery hasn't been included more than once (sometimes the link may be at the bottom of the html either) Also check for diiferent vsns – Rachel Gallen May 09 '17 at 22:10
  • Can you please let me know how can i do that? @Lixus – Rnga May 09 '17 at 22:10
  • http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Lixus May 09 '17 at 22:10
  • Is your select wrapped in another element that you can hook the event to? It could be the `document` but closer is better. – Mark Schultheiss May 09 '17 at 22:19
  • There seems to be errors in the html code that you posted in your update. I switched the color to black and removed a rogue quote mark. Came up with: $('#add-box').append('

    ');     – Rachel Gallen May 09 '17 at 22:31
  • Your code is incomplete without the code that adds the select dynamically to your page. If you use whatever you appended TO as the anchor for the event manager it will work. – Mark Schultheiss May 09 '17 at 22:40

1 Answers1

1

If you add the markup for the select dynamically, you should also bind the event dynamically:

$(document).on('change', "#select-box", function () {
   console.log("I am in select box change");         
});
doberkofler
  • 9,511
  • 18
  • 74
  • 126