problems with $().click() when generating JavaScript code with a PHP loop - php

Question

Regards.
I am generating an .click event for every element of my table using a php loop like this:
<?php foreach ($elements as $element){ ?>
var element_id = <?= json_encode($element['element_id']));?>;
$('#'+element_id+'_button').click(function() {
$('#'+element_id+'_interval').toggle();
if ($(this).hasClass('active')){
$(this).removeClass('active');
}
else{
$(this).addClass('active');
}
});
<?php }?>
the problem is, when $('#'+element_id+'_interval').toggle(); the element is not responding but it adds and removes the classes correctly, somebody help me please.

Answer 1

Use a class, makes your code a lot cleaner, however if you have to do it this way you should know that your element_id variable is constantly being rewritten.
Try something like:
<button class="toggler" data-target="#interval_1"></button>
$(".toggler").click(function (ev) {
ev.preventDefault();
var target = $(this).data("target"); // would return #interval_1
$(target).toggle();
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});

Answer 2

I would advise you to firstly separate your php from your javascript.
Otherwise (between other) it will be difficult to maintain.
As a start, you could do the loop with javascript

Answer 3

Put the binding events into a seperate method, and call the method in your document.ready script:
$(document).ready(function() {
bindBtns();
});
function bindBtns()
{
<?php foreach ($elements as $element){ ?>
var element_id = <?= json_encode($element['element_id']));?>;
$('#'+element_id+'_button').click(function() {
$('#'+element_id+'_interval').toggle();
if ($(this).hasClass('active')){
$(this).removeClass('active');
}
else{
$(this).addClass('active');
}
});
<?php }?>
}