October CMS Javascript Event On Backend Repeater Fields
Using October CMS for a project, I try to add a javascript event on backend repeater fields. But it seems dynamically added input field by repeater doesn't see by the javascript while it works with others input field of the same form
my script below:
<script>
$('input').on('keypress', function(e){
// only numbers
if ( charCode < 48 || charCode > 57 ) {
return false;
}
return true;
});
</script>
have you some idea to make it works ?
thanks in advance & regards, Patrick
Answer
You stated:-
it seems dynamically added input field by repeater doesn't see by the javascript while it works with others input field of the same form
It is a correct behavior because event binding has been done when page was loaded and you have created new elements afterwards, so event doesn't bound on those elements.
You have to use the technique which is called event delegation. Like:
$(document).on('keypress', 'input', function(e){
// the code
});
Here in this code you can change $(document)
to a closest static parent like any div, form etc.
.
$('form').on('keypress', 'input', function(){
// code here
});
So, the syntax is:
$(staticParent).on(event, selector, callback);
Where staticParent is the element which is the parent element when page was loaded. It should not be a dynamically created parent.
Related Questions
- → OctoberCMS - How to make collapsible list default to active only on non-mobile
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → when i send data with ajax(jquery) i don't find the values in controller without form in laravel 5.1
- → DropzoneJS & Laravel - Output form validation errors
- → Knockout JS - How to return empty strings for observable fields
- → How to replace *( in a string
- → Get the calling element with vue.js
- → Sent Variable to Controller via Ajax in Blade
- → AJAX folder path issue
- → Onclick with argument causes javascript syntax error
- → KNockout JS - Automatic reload of ajax call