JQuery fade out problems? In Rails

Hey guys, attached below is my code, and then my CSS. They item fades in correctly, but wont seem to fade out.

<div id="click-22" class="defer-icon">
<script>


      $("#click-22").click(function () {
        $("#22").fadeIn("slow");
      });
      $("#set-22").click(function () {
        $("#22").fadeOut("sl开发者_如何学编程ow");
      });


</script>

    <div id="22" class="defer-pop">

        <div id="set-22" style="background-color:red">Set</div>
        <div id="cancel-22">Cancel</div>


    </div>

</div>

Class for defer-pop:

.defer-pop{
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    border:1px solid #CCC;
    position:relative;
    top:-80px;
    left:-90px;
    background-color:#fff;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(212,212,212)),
        color-stop(0.62, rgb(245,245,245))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(212,212,212) 0%,
        rgb(245,245,245) 62%
    );
    display:none;
    width:200px;
    height:80px;
    font-size:10px;
     box-shadow:0px 1px 0px #ababab;
    -webkit-box-shadow:0px 0px 10px #ababab;
    -moz-box-shadow:0 1px 0px #ababab;
}

Any help would be great!

Thanks

HTML

<div id="click-22" class="defer-icon" style="background-color:#000">

    <div id="22" class="defer-pop">

        <div id="set-22" style="background-color:red">Set</div>
        <div id="cancel-22">Cancel</div>


    </div>

</div>

Javascript

<script type="text/javascript">
$(document).ready(function(){
  $("#click-22").click(function () {
    $("#22").fadeIn("slow");
  });
  $("#set-22").click(function () {
    $("#22").fadeOut("slow");
  });
})
</script>

Css for my help

.defer-pop{
    width:200px;
    height:200px
}

Remember include jquery.js above tag

and tip-

you should be writing your code in

$(document).ready(function(){
    //your logic here
});

I believe this is because set-22 is a child of click-22 and the event handler for click on click-22 is fired when set-22 is clicked. To confirm this, put logging or alert statements in both event handlers. To stop this behavior, use event.stopImmediatePropagation() which prevents all other event handlers from firing, or event.stopPropagation() to prevent parent event handlers from firing in the child's event handler:

$("#click-22").click(function() {
    $("#22").fadeIn("slow");
});
$("#set-22").click(function(event) {
    event.stopImmediatePropagation();
    $("#22").fadeOut("slow");
});

stopImmediatePropagation() prevents the event from propagating up to parent elements, and prevents other event handlers from firing. I tweaked your example and have it working here: http://jsfiddle.net/andrewwhitaker/a4ffk/

Other notes:

• Don't use numbers as ids. This violates the W3 specification and can cause problems with your script in some browsers.