Template Custom Button onClick function

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I have used the template component with html activated to create a custom <input type="checkbox" id="myBtn">

I have also created some inline javascript to detect when the checkbox is clicked:

( inline )
$( document ).ready(function()
   {   $('#billingCheck').click(function() {
           // Clicked

       });
  });

The click listener works until a insert any data into an editor I'm presuming because a models data has changed, 

Any ideas?
Photo of Sean

Sean

  • 260 Points 250 badge 2x thumb
  • frustrated

Posted 4 years ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
I'm still getting used to jQuery selects, but how is the onClick function working when you've got the id set to "myBtn" and the jQuery select set to "#billingCheck"?
Photo of Sean

Sean

  • 260 Points 250 badge 2x thumb
My bad Pat I wrote that off memory!, the Id of the input and onClick are the same in my code and it works until a change is made to any field editor, it's like the listener is becoming deactivated?.
(Edited)
Photo of Sean

Sean

  • 260 Points 250 badge 2x thumb
I suppose a better title for this is
"Custom onClick listener becoming deactivated" when changes are made to a model.
Photo of Sean

Sean

  • 260 Points 250 badge 2x thumb
FIX**, Found the problem, when you use a Template component in a field editor like I did and create a custom button or checkbox with a onClick listener in resources, if the editor is 'edited' the button or component will lose it's eventListener .

Solution: move your custom template component outside of any editors.