Identifying 'Change' Correctly
I'm trying to show an ajax loader just below the toggle switch (checkbox) that has changed its state. There are about 4 switches / checkboxes. My code is this:
(function( $ ) { 'use strict'; $(function() { //Monitor toggle and trigger AJAX to update app status $(".app").on('change', function () { //Show the ellipsis loader below the toggled checkbox $(".app").bind('change', function(element) { $(this).parents(".price-box").find(".uil-ellipsis-css").show(); }); var appStatusData = $("#io_dashboard").serialize(); console.log(appStatusData); //Add User To Site & Update User Meta //AJAX HAPPENS HERE }); }); })( jQuery );
The problem is that this only works on 'second' toggle. That is -
1. Page is refreshed.
2. Toggle Switch: loader does not work.
3. Toggle the same or any other switch: Loader now works.