Нотация 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;
}

Но я не могу добиться успеха, чтобы Event Click заработал:

        // 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');
    });

Все работает отлично, но, как вы можете видеть, @ строка с предупреждением ( 'toto'); => Это не работает... Я не могу заставить работать вживую ('click') и поэтому не могу опубликовать голосование в запросе ajax, чтобы добавить его в БД

Может ли кто-нибудь помочь мне?

Ура!

Источник

2 ответа

.live() был удален, используйте делегирование с .on() вместо:

$(document).on('click', '.note-checked', function () {
    alert('toto');
});
Источник

Спасибо А. Вольфу, который помог:

.live () был удален, используйте делегирование с.on() вместо этого:

$(document).on('click', '.note-checked', function () {
    alert('toto');
});
Источник
Другие вопросы по тегам