?
Solved

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

Posted on 2014-03-20
4
Medium Priority
?
586 Views
Last Modified: 2014-03-21
This is a follow up to:

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28393799.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

0
Comment
Question by:DrDamnit
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 24

Accepted Solution

by:
mankowitz earned 2000 total points
ID: 39944374
If you want the selector to pick the input boxes, change the selector to

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

see http://jsfiddle.net/66LbJ/

HTML:
<div class="playerMods">
    <input type="checkbox" id="autoplayStatus" data-stuff="autoplaybutton">Autoplay
    <input type="checkbox" id="enableControls" data-stuff="enablebutton">Enable Controls</div>

Open in new window


JS
$(document).on('click', '.playerMods input', 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;
    }
    console.log(a, c, $(this).data("stuff"));
});

Open in new window

0
 
LVL 7

Expert Comment

by:XGIS
ID: 39944492
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.
0
 
LVL 32

Author Comment

by:DrDamnit
ID: 39945685
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...
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39945722
Nothing wrong with your code. See it working here...

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

Featured Post

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question