JQuery function only works within a function

by

Yes there is a solution. You have to use delegation because the HTML element is created dynamically.

Considering the .towns element the container of the select box and #town_id the select box the syntax looks like this:

$('.towns').on('change', '#town_id', function(){
    if($(this).val() == "ADD_NEW"){
        console.log('Add New');
        $('#town_id').val('');
        $('#town_id').trigger('chosen:updated');
        $('#modal-1').modal('show');
    }
});

And yes, this will work for both static and dynamic select box.

Direct and delegated events

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. […]

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().

Read more

More Related Contents:

  1. “Thinking in AngularJS” if I have a jQuery background? [closed]
  2. Managing jQuery plugin dependency in webpack
  3. Changing the image source using jQuery
  4. Prevent double submission of forms in jQuery
  5. how to bypass Access-Control-Allow-Origin?
  6. Get index of element as child relative to parent
  7. Mismatched anonymous define() module
  8. How to set time delay in javascript
  9. Why can I not define functions in jQuery’s document.ready()?
  10. How do I do string replace in JavaScript to convert ‘9.61’ to ‘9:61’?
  11. How to wait until jQuery ajax request finishes in a loop?
  12. How to detect if the user clicked the “back” button
  13. How to mute an html5 video player using jQuery
  14. Better way to prevent browser caching of JavaScript files
  15. $this vs $(this) in jQuery
  16. How to get the key of a key/value JavaScript object
  17. Save access to this scope
  18. How to set DOM element as first child?
  19. Google Place API – No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access [duplicate]
  20. Execute function after Ajax call is complete
  21. How to get the JSON with duplicate keys completely in javascript
  22. Uppercase first letter of variable
  23. Autocomplete requires you to click twice in iOS after update to 1.11.0
  24. Does the jQuery ajax call support PATCH?
  25. FullCalendar TypeError: $(…).fullCalendar is not a function
  26. Highcharts – Keep tooltip showing on click
  27. jQuery addClass onClick
  28. Is My Page Being Loaded from the Browser Cache?
  29. In jQuery, is there any way to only bind a click once?
  30. Renaming object keys recursively

Leave a Comment