.change does not work when element is bound to another?

Not quite sure how to explain this but h开发者_运维技巧ere goes.

I have a function which hides/shows based on a checkbox:

$("#checkbox").change(change_visibility);

  function change_visibility() {
   if ($("#checkbox").is(":checked")) {
       $("#theForm").fadeTo("opacity", "1", function() {
        //End Animation
     });

     } else {
       $("#theForm").fadeTo("opacity", "0.3", function() {
         //End Animation
     });
   }

Problem is that now I have bound this checkbox to a button elsewhere and change() is not behaving as I would expect.

   $("#myButton").click(function(){
      $("#checkbox").attr("checked", true);
   });

Even though the checkbox is changing, as it should, it doesnt seem to be calling the change_visibility() function as it does when I click on it manually.

Any idea why this would be?

Whenever you change the status or value of an input element, the change event is not triggered.

But you can trigger it manually:

$("#checkbox").prop("checked", true).change();

The simple way would be to do this

$("#myButton").click(function(){
      $("#checkbox").attr("checked", true);
      $("#checkbox").change();
});

Sounds like the .change() event doesn't get fired when you change the checkbox manually. But the solution is still very simple. Just call the change_visibility() function yourself:

  $("#myButton").click(function(){
      $("#checkbox").attr("checked", true);
      changeVisibility();
  });

Attach an event handler to change event and call the change method on button click.

$("#checkbox").change(function() {
   if (this.checked) {
       $("#theForm").fadeTo("opacity", "1", function() {
        //End Animation
     });

     } else {
       $("#theForm").fadeTo("opacity", "0.3", function() {
         //End Animation
     });
   });


 $("#checkbox").attr("checked", true).change();

Try

$("#myButton").click(function(){
      $("#checkbox").attr("checked", true).trigger('change');
});

That should trigger the change event after you dynamically check the box.