Link to home
Start Free TrialLog in
Avatar of DrDamnit
DrDamnitFlag for United States of America

asked on

How can jQuery select what was clicked on in a div?

This is a follow up to:

https://www.experts-exchange.com/questions/28393799/jQuery-code-does-not-fire-on-modal-forms.html
      
The code works, but I have two elements (checkboxes) in the div. I have used the class / container function so I only have to write one function to manage these, but each of the checkboxes carries with them a data attribute that is requried for an ajax call. $(this) no longer refers to the checkbox clicked, but rather the div. How do I refer to the checkbox that was clicked (specifically) so I can extract that id from the data attribute?

The HTML:
<div class="playerMods"><input type="checkbox" id="autoplayStatus"> Autoplay <input type="checkbox" id="enableControls">  Enable Controls</div>

Open in new window


The jQuery Code (Note: I am aware the _this isn't working... that was the impetus for this question).

$(document).on('click','.playerMods',function(){
                console.log($(this));
                var _this = $(this);
                var a=0;
                var c=0;
                if($("#autoplayStatus").is(':checked'))
                {
                    a=1;
                } else {
                    a=0;
                }
                if($("#enableControls").is(':checked'))
                {
                    c=1;
                } else {
                    c=0;
                }
                $.ajax({
                    url:"getHTML5Code.php?id="+_this.data('id')+"&a="+a+"&c="+c
                }).done(function(data){
                    $("#TheCode").html(data)
                })

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of mankowitz
mankowitz
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hello Michael;
An alternate and simpler solution may be done without JQuery if that is preferred.
Divs and IDs

To add a message using some jquery this example does the same things;
Display Message on Click

It references the css class and its "a" content.  The same approach should be fine for checkboxes.   Ignore the rest of the CSS and DIV complexity in the 2nd sample.
Avatar of DrDamnit

ASKER

And if I only wanted to select checkboxes in that class / div area?

$(document).on('click','.playerMods input:checkbox',function(){

Open in new window


Doesn't appear to work...
Nothing wrong with your code. See it working here...

http://jsfiddle.net/ChrisStanyon/thuv9/