Jquery how to use variable as identifier for .change() function?

Question

right now I am a beginner in Javascript/Jquery. I want to create a dynamic code, so that it will work when there comes some new features to the website without need to edit code.

Now i just read in some posts how to use a variable as identifier for id, but it is not working for me. So below is an example:

var category;
$('#mainCategory').change(function (event) {
   checkboxID = event.target.id;
   category="category"+checkboxID;
   ...some code...
});
$("#"+category).change(function (event) {
    $('#category'+checkboxID+' :input').attr('class','' );
    console.log("var: "+category);
});

So the function mainCategory always runs before the other one and category got written correct in the 2nd function, when i am using the whole expression instead of using a variable. I hope you can help me.

the part of html code:

 <form method="post" action="../php/saveTraining.php">
    <section id="mainCategory" class="hidden">
        <label><input type="checkbox" id="Krafttraining">Krafttraining</label>
        <label><input type="checkbox" id="Joggen">Joggen</label>
    </section>
    <section id="categoryKrafttraining" class="hidden">
        <label><input type="checkbox">Kurzhantel</label>
        <label><input type="checkbox">Bankdrücken</label>
        <label class="hidden"><input type="number" id="saetze">Sätze</label>
        <label class="hidden"><input type="number" id="wiederholungen">Wiederholungen</label>
    </section>
    <input type="hidden" id="saveTraining" name="sent" value="save" class="hidden"/>
</form>

So what actually happens is that when checking a checkbox of mainCategory the checkboxes of the second section appearing. But when I check a checkbox of the second section nothing happens.

Unless you're manually calling the `mainCategory` change function somewhere we don't see - `category` is undefined when the handler is being created. — tymeJV, Sep 16 '16 at 19:56
You're adding `checkboxID` to "category" to make the `category` variable... then adding it *again* inside the handler when calling `attr()`. Even once the rest of the code is fixed, that's not going to work unless your HTML is *much* weirder than we think. Can you show the HTML you're working with? — Paul Roub, Sep 16 '16 at 20:12
It would be better to use a class that all the elements you care about will be given. Then you can use event delegation to dynamically-added members of that class. See http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Sep 16 '16 at 20:20
html code is added in the question thanks for your help guys — webbie, Sep 16 '16 at 20:24
ok...now provide an explanation of what exactly you want this code to do. Broken code isn't a good substitute for a proper explantion — charlietfl, Sep 16 '16 at 20:25
so code is working when i put the 2nd function in the first one but i dont understand why.. Because normally the first function get called when sth in the first section got changed right? So how i can be called when sth in the 2nd section got changed.. — webbie, Sep 16 '16 at 20:27
I don't see how it could work at all from what is shown `#mainCategory` is a `
` which can't listen to `change` only form controls can — charlietfl, Sep 16 '16 at 20:29
Ok sorry i will explain it a bit: When i check one of those checkboxes in the first section then they will come some new checkboxes, the one of the 2nd section. And when a checkbox in there got checked then there should be appear 2 input number fields. — webbie, Sep 16 '16 at 20:29
Please [edit] your question to make it clear what you expect to happen vs. what's actually happening. Also, please capitalize the letter i when using it to refer to yourself. — Heretic Monkey, Sep 16 '16 at 20:50

The One and Only ChemistryBlob · Answer 1 · 2016-09-16T20:49:42.057

-1

I thought I had the solution before but I see I was wrong. I believe this should work, where you re-add the listener as the value for the var category change:

var category;
$('#mainCategory input[type="checkbox"]').change(function (event) {
     checkboxID = event.target.id;
     category="category"+checkboxID;

     $('#' + category).find('input[type="checkbox"]').off("change").on("change", function (event) {
         $('#category'+checkboxID+' :input').attr('class','' );
         console.log("var: "+category);
     });
 });

You need to re-add the listener because new elements will be targeted as var category changes.

edited Sep 16 '16 at 20:49

answered Sep 16 '16 at 19:56

The One and Only ChemistryBlob

7,864
10
36
69

2

Isn't `category` still `null` (or, rather, uninitialized) when you set up the `on()` handler? How is `$("#"+category)` valid now? Do you mean `$(document).on('change', '#category', function...`? – Paul Roub Sep 16 '16 at 20:00
thanks it is working like this, but i really do not understand why. Because the mainCategory function is called when sth in this section will change right? But the second function is in the same form but in another section. I will add html code above. – webbie Sep 16 '16 at 20:21
This is not a good way to do it. It will cause multiple handlers to be added to `#+category` if you select the same category from `#mainCategory`. – Barmar Sep 16 '16 at 20:21
this will compound event listeners if user selects same item more than once – charlietfl Sep 16 '16 at 20:22
yes at first i only wanted to listen to all checkboxes in mainCategory that got checked and in a second one that got unchecked but somehow the selector for checkboxes was not working – webbie Sep 16 '16 at 20:34
the secondary elements should just get value from the main one on as needed basis and not be this tightly coupled – charlietfl Sep 16 '16 at 20:34
like how else should i do this ? can you give me an example please? – webbie Sep 16 '16 at 20:43
I just noticed that you weren't listening for changes on checkboxes - I have updated the code – The One and Only ChemistryBlob Sep 16 '16 at 20:49
thank you ! :) but i still dont got why the second function need to be in the first one :S – webbie Sep 16 '16 at 21:01
Glad I could help! The variable category is always changing, it will be targeting different elements with each change (each checkbox click). You must now add a new change listener for these new elements that are being targeted, because they weren't necessary being listened to before category changed its value – The One and Only ChemistryBlob Sep 16 '16 at 21:04

Jquery how to use variable as identifier for .change() function?

1 Answers1