Niceforms and jQuery events

Question

Our design agency has supplied HTML that uses NiceForms. The problem I am having is that this mucks up jQuery event binding.

I have the following code:

keys = $("#key input");
$(keys).each(function(){
  $(this).change(function() {
    console.log("hi");
  });
});

If I disable NiceForms this code works but with Niceforms enabled it doesn't. How do I get around this problem?

Answer 1

Fix the typo in your code, see if it works then:

keys = $("#key input");
$(keys).each(function(){
  $(this).change(function() {
    console.log("hi");
  });   // <-- oops
});     // <-- oops

I tested with the NiceForms demo using:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;

And the selector keys = $(".niceform input"); and after fixing the typos it works as expected. You are enclosing the code in a $(document).ready(function () {} handler, right? #key is a proper selector for an element enclosing the form input elements, right?

Answer 2

Ok it turned out that the problem was that the Niceforms image when clicked does not raise the onchange event of the underlying checkbox.

To raise the underlying event find the inputCheck function in NiceForms.js and alter the following (this assumes you are using jQuery):

  el.dummy.onclick = function() {
    if(!this.ref.checked) {

        this.ref.checked = true;
        $(this.ref).change(); //added
        this.className = "NFCheck NFh";
    }
    else {

        this.ref.checked = false;
        $(this.ref).change(); //added
        this.className = "NFCheck";
    }
}