Hello,
I'm developing one of my first extensions and it works as long as it is the only instance of said extension on the page. However, when I have multiple extensions on the same sheet, my eventlisteners start acting up. I've included the specific rows of code which confuses me:
$element.html(
'<li class="lui-list__item" id="myCheckbox">'+
'<input type="checkbox" id="myCheckbox" class="myClass"/>'+
'<label for="myCheckbox" class="lui-list__text" id="myCheckboxLabel">abc'+
'<span class="lui-icon lui-icon--tick" aria-hidden="true">'+
'</label>'+
'</li>'+
'<li class="lui-list__item" id="otherCheckboxLi">'+
'<input type="checkbox" id="otherCheckbox" class="advancedCheckBoxes"/>'+
'<label for="otherCheckbox" class="lui-list__text" id="otherCheckboxLabel">cde'+
'<span class="lui-icon lui-icon--tick" aria-hidden="true">'+
'</label>'+
'</li>');
console.log($element.find("#myCheckbox"));
$element.find('#myCheckbox').on("change",function(e) {
console.log(layout.qInfo.qId)
if($element.find('#myCheckbox').checked == true) {
$element.find("#otherCheckboxLi").addClass("lui-disabled");
}
else {
$element.find("otherCheckboxLi").removeClass("lui-disabled");
}
});
When the paint methods is executed the first time, the first console.log prints out the individual checkbox of each extension. However, when I click the checkbox in the second extension, the action is performed in the first. In the console.log of the extensions ID, the ID of the first extension is printed, not of the one I clicked the checkbox in.
I thought using $element ensured that the code would operate within the specific instance of the extension, but am I missing something? How should I define the event listener I have bolded above in such way so it is applied in the specific instance of the extension?
