2013-11-21 22 views
0

餘米幹活每顆星的符號:Jquery的符號不能成功事件點擊

<div class="noteUser"> 
    <ul class="notes-echelle"> 
     <li> 
      <label for="note01" title="Note&nbsp;: 1 sur 6">&nbsp;</label> 
      <input type="radio" name="notesA" id="note01" value="1" /> 
     </li> 
     <li> 
      <label for="note02" title="Note&nbsp;: 2 sur 6">&nbsp;</label> 
      <input type="radio" name="notesA" id="note02" value="2" /> 
     </li> 
     <li> 
      <label for="note03" title="Note&nbsp;: 3 sur 6">&nbsp;</label> 
      <input type="radio" name="notesA" id="note03" value="3" /> 
     </li> 
     <li> 
      <label for="note04" title="Note&nbsp;: 4 sur 6">&nbsp;</label> 
      <input type="radio" name="notesA" id="note04" value="4" /> 
     </li> 
     <li> 
      <label for="note05" title="Note&nbsp;: 5 sur 6">&nbsp;</label> 
      <input type="radio" name="notesA" id="note05" value="5" /> 
     </li> 
     <li> 
      <label for="note06" title="Note&nbsp;: 6 sur 6">&nbsp;</label> 
      <input type="radio" name="notesA" id="note06" value="6" /> 
     </li> 
    </ul> 

用CSS:

.noteUser ul.notes-echelle { 
    margin: 0; 
    padding: 0; 
    font: .75em/1.2 Arial, Helvetica, sans-serif; 
} 

.noteUser ul.notes-echelle li { 
    float: left; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    font-family: 'Titillium Web', sans-serif; 
    width: 40px; 
    height: 35px; 
} 

/* Correctif IE6 sur min-width & min-height */ 
* html ul.notes-echelle.js li { 
    width: 40px; 
    height: 35px; 
} 

.noteUser ul.notes-echelle li label { 
    display: block; 
    text-align: center; 
    line-height: 38px; 
    background: url('../../assets/images/sitewide/sprite_icones.png') no-repeat -10px -172px; 
    cursor: pointer; 
} 

.noteUser ul.notes-echelle li.note-off label { 
    background-position: -50px -172px; 
} 

ul.notes-echelle.js input { 
    position:absolute; 
    left:-999%; 
} 

/* Effet lorsque une note est cochée */ 
ul.notes-echelle li.note-checked { 
    font-weight:bold; 
} 
/* Effet lorsque une note est tabulée au clavier */ 
ul.notes-echelle.js li.note-focus { 
    outline:1px dotted #000; 
} 

,但我不能成功獲得事件點擊工作:

 // NOTE USER : 
    $("ul.notes-echelle").addClass("js"); 

    // On passe chaque note à l'état grisé par défaut 
    $("ul.notes-echelle li").addClass("note-off"); 

    // Au survol de chaque note à la souris 
    $("ul.notes-echelle li").mouseover(function() { 
     // On passe les notes supérieures à l'état inactif (par défaut) 
     $(this).nextAll("li").addClass("note-off"); 
     // On passe les notes inférieures à l'état actif 
     $(this).prevAll("li").removeClass("note-off"); 
     // On passe la note survolée à l'état actif (par défaut) 
     $(this).removeClass("note-off"); 
    }); 

    // Lorsque l'on sort du sytème de notation à la souris 
    $("ul.notes-echelle").mouseout(function() { 
     // On passe toutes les notes à l'état inactif 
     $(this).children("li").addClass("note-off"); 
     // On simule (trigger) un mouseover sur la note cochée s'il y a lieu 
     $(this).find("li input:checked").parent("li").trigger("mouseover"); 
    }); 

    $("ul.notes-echelle input") 

    // Lorsque le focus est sur un bouton radio 
    .focus(function() { 
     // On passe les notes supérieures à l'état inactif (par défaut) 
     $(this).parent("li").nextAll("li").addClass("note-off"); 
     // On passe les notes inférieures à l'état actif 
     $(this).parent("li").prevAll("li").removeClass("note-off"); 
     // On passe la note du focus à l'état actif (par défaut) 
     $(this).parent("li").removeClass("note-off"); 
    }) 

    // Lorsque l'on sort du sytème de notation au clavier 
    .blur(function() { 
     // Si il n'y a pas de case cochée 
     if($(this).parents("ul.notes-echelle").find("li input:checked").length == 0) { 
      // On passe toutes les notes à l'état inactif 
      $(this).parents("ul.notes-echelle").find("li").addClass("note-off"); 
     } 
    }); 

    $("ul.notes-echelle input") 

    // Lorsque le focus est sur un bouton radio 
    .focus(function() { 
     // On supprime les classes de focus 
     $(this).parents("ul.notes-echelle").find("li").removeClass("note-focus"); 
     // On applique la classe de focus sur l'item tabulé 
     $(this).parent("li").addClass("note-focus"); 
     // [...] cf. code précédent 
    }) 

    // Lorsque l'on sort du sytème de notation au clavier 
    .blur(function() { 
     // On supprime les classes de focus 
     $(this).parents("ul.notes-echelle").find("li").removeClass("note-focus"); 
     // [...] cf. code précédent 
    }) 

    // Lorsque la note est cochée 
    .click(function() { 
     // On supprime les classes de note cochée 
     $(this).parents("ul.notes-echelle").find("li").removeClass("note-checked"); 
     // On applique la classe de note cochée sur l'item choisi 
     $(this).parent("li").addClass("note-checked"); 
    }); 

    // On simule un survol souris des boutons cochés par défaut 
    $("ul.notes-echelle input:checked").parent("li").trigger("mouseover"); 
    // On simule un click souris des boutons cochés 
    $("ul.notes-echelle input:checked").trigger("click"); 

    $('.note-checked').live('click', function(){ 
     alert('toto'); 
    }); 

Ev紅色的東西完美地工作,但正如你可以看到@符合警戒('toto'); =>這不工作...我不能成功,使生活('點擊')工作,所以不能發表投票到ajax請求中添加它在數據庫中

有人可以幫我嗎?

乾杯!

回答

3

.live()已被刪除,請代表團.on()代替:使用代表團。對(),而不是

.live()已被刪除:

$(document).on('click', '.note-checked', function() { 
    alert('toto'); 
}); 
+0

Jezz!謝謝A.沃爾夫oO錯過了:( – Titus

+1

)另外,最好使用一個父選擇器,這個'.note-checked'在裏面來提高性能,讓它一直冒泡到文檔,就像使用' (''click','.note-checked',function(){/ * code * /});''('#parentArea')。 –

0

感謝A.沃爾夫,幫助:

$(document).on('click', '.note-checked', function() { 
    alert('toto'); 
});