Question

I was wondering if someone can help guide me how I can write a event when I’m using toggleClass in jQuery?

I have a list of items and when I click on an item, it highlights it, and when someone clicks another item from the list, the previous highlighted item goes away and highlights the current click. Also, if I click the same item that has been highlighted, it goes away.

Now I’m trying to write a function to call ajax when only its been highlighted. So it won’t run the ajax function again when its being pressed again (when highlight is removed).

        $(".media").on('click',function(){
            var $this = $(this);

            // highlighting the object
            $this.toggleClass('selectMedia').siblings().removeClass('selectMedia');

            // saving the id

            var selId1 = $this.data('id');
            $.post("ajax/ajax_sessions.php", {"sel_1":selId1}, function(data) {
                alert(data); // alerts 'Updated'
            });
        });

Thank you for help!

Answer 1

Just check for the existance of the class before doing your AJAX request:

if ( ! $this.hasClass('selectMedia') ) return;

// Now do your AJAX request...