JQuery исчезают проблемы? В Rails

Question

Эй, ребята, я прикреплен ниже, это мой код, а затем мой CSS. Они нормально исчезают, но, похоже, не исчезают.

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


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


</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> 

Класс для Defer-поп:

.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; 
} 

Любая помощь будет здорово!

Благодаря

Answer 1

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 моей помощи

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

Помните включать jquery.js выше тег

и Наконечник

вы должны писать код в

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

Answer 2

Я считаю, что это происходит потому, что set-22 является дочерним click-22 и обработчик события для click на click-22 вызывается при нажатии set-22. Чтобы подтвердить это, введите logging или alert в обоих обработчиках событий. Для того, чтобы остановить это поведение, используйте event.stopImmediatePropagation(), который предотвращает все другие обработчик событий от стрельбы, или event.stopPropagation() предотвратить обработчики родительских событий от стрельбы в обработчике события ребенка:

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

stopImmediatePropagation() предотвращает событие от распространяющихся до родительских элементов, и предотвращает запуск других обработчиков событий. Я подправили свой пример и он работает здесь: http://jsfiddle.net/andrewwhitaker/a4ffk/

Другие ноты:

• Не используйте цифры в id с. Это нарушает W3 specification и может вызвать проблемы с вашим скриптом в некоторых браузерах.