How do I get the event source element

Question

I'm trying to keep my JS modular for easier readability and generalized, however I am having trouble getting the $(this) of the checkboxButton.on("click") to make define the variable checkboxSelected.

How do I make a global variable from within a function() (if that is the right way of putting it)?

var checkboxButton = $("[data-checkbox-id]"), checkboxContainer = checkboxButton.parent(); function checkboxRadio() { var checkboxSelected = $(this).attr("data-checkbox-id"); console.log(checkboxSelected); checkboxSelected.attr("aria-checked","true"); if (!$('[data-checkbox-id="' + checkboxSelected +'"]')) { checkboxButton.attr("aria-checked","false"); } } function checkboxInit() { console.log("Checkbox Initialised"); checkboxButton.on("touchend click", function(e) { e.preventDefault(); // Check the checkbox type if (checkboxContainer.attr("data-checkbox-type") == "radio") { checkboxRadio(); } else { // checkboxMultiple(); } }); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset data-checkbox-type="radio"> <label>Gender</label> <button class="checkbox-radio" value="male" name="male" aria-checked="true" data-checkbox-id="1"> <span class="icon-checkbox"></span> No </button> <button class="checkbox-radio" value="female" name="female" aria-checked="false" data-checkbox-id="2"> <span class="icon-checkbox"></span> Yes </button> </fieldset>

Can you be little more clear of what exactly you want the output to be — Geeky
– Geeky, Commented Dec 29, 2016 at 23:47
Send along this when you call the function: (1) checkboxRadio(this); (2) function checkboxRadio(btn) { (3) var checkboxSelected=$(btn).attr("data-checkbox-id"); — myfunkyside
– myfunkyside, Commented Dec 29, 2016 at 23:57
Instead of .attr("data-checkbox-type") I'd recommend using .data("checkbox-type"). — Erik Philips
– Erik Philips, Commented Dec 30, 2016 at 0:27
@FelixKling - I clearly still have so much to learn.. didn't even know about this. What exactly is the downside of my solution (one comment after yours), as opposed to yours? (One benefit I can see of your solution is that you don't have to declare an argument in the invoked function, meaning you can call it from other places without specifying this, but are there more reasons?) — myfunkyside
– myfunkyside, Commented Dec 30, 2016 at 2:56

myfunkyside · Accepted Answer · 2016-12-29 23:59:36Z

Send along this when you call the function:

checkboxRadio(this);
function checkboxRadio(btn) {
var checkboxSelected = $(btn).attr("data-checkbox-id");

Henrique Martins · Accepted Answer · 2016-12-30 00:08:54Z

You can always use the bind method before calling it like this:

checkboxRadio.bind(this)();

Basically what it does is: you're saying to the method your calling the context of the this variable.

So, when you do checkboxRadio.bind(this)(); the method checkboxRadio will know that the this variable is the button that you just clicked.

For more information about the bind method you can find it here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Collectives™ on Stack Overflow

How do I get the event source element

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related