My issue involves a set of checkboxes being dynamically added to a document using an Ajax call.
<input type='checkbox' checked class='import'>
<input type='checkbox' checked class='import'>
<input type='checkbox' checked class='import'>
<input type='checkbox' checked class='import'>
<input type='checkbox' checked class='import'>
In addition, I have implemented some JavaScript code using the prototype framework.
function check_toggle(obj, e) {
if (e.shiftKey) {obj.checked=!obj.checked;}
else if (e.altKey) {obj.checked=true;}
else if (e.ctrlKey) {obj.checked=false;}
}
$$('.import').each(function(obj){
Event.observe(obj, "mouseover", function(e){alert('here');}.bind(this))
});
Everything works fine if the checkboxes are already present on the page during page load.
However, I encounter an issue if I try to call the "$$" method after the checkboxes have been added dynamically to the DOM via AJAX. The event listeners are not being picked up.
Therefore, I am seeking a solution to make prototype re-evaluate the current state of the DOM. Any suggestions or workarounds would be greatly appreciated.
I have attempted various methods such as calling the $$ function within the onSuccess callback, as a separate function after the AJAX call, and even outputting the entire $$ function as part of the AJAX values. Unfortunately, none of these attempts have been successful.
Your assistance is highly valued. Thank you.