<span> jQuery .cliquez sur() ne fonctionne pas

Donc, j'ai créé une supprimer "bouton" dans un span, mais pour une raison que je ne peux pas obtenir le .cliquez sur() pour le feu. Des idées? Je suis nouveau sur jQuery et pense que c'est quelque chose d'évident. J'ai testé sur Chrome et Safari avec pas de chance.

CSS:

.delete_button {
    cursor:pointer;
    color: #fff;
    border: 1px solid #FFF;
    border-radius: 15px;
    background: #AAA;
    font-size: 8px;
    line-height: 0px;
    padding: 0px 2px 0px 2px;
}

HTML/PHP:

<span class="delete_button" id="delete_<? echo $some_id; ?>">X</span>

jQuery: 

$(document).ready(function() {
    $('.delete_button').click(function() {
            var transaction_id = $(this).attr('id').replace('delete_','');
            alert("Delete transaction #" + transaction_id);
            return false;
        });
});
  • Êtes-vous de les ajouter de façon dynamique?
  • Je ne sais pas pourquoi tout le monde suppose qu'il en ajoutant le bouton dynamiquement... il a PHP, donc il ne peut pas être...
  • Oui, vous pouvez voir 2 réponses déjà là. Probablement la fréquence de la question similaire, à chaque jour.. 🙂 Si ce n'est la réponse devrait fonctionner sans aucun problème.
  • parce que le code est correct et dynamiques à l'aide de l'id, plus likley delete_1,2,3,4
  • Ajouter une alerte avant de cette ligne: $('.delete_button').click(function() { Voir si ce code est en cours d'exécution à tous.
  • L'ID est écrite en PHP... donc il peut très bien être là au chargement de la page. Le Javascript n'est pas la seule façon de faire les chose de façon dynamique sur une page. Il peut être fait de manière dynamique, mais les gens ne devraient pas assumer de la sorte.
  • avoir un coup d'oeil.. C'était la question que je suppose. 🙂
  • Si ça n'aurait pas été correct de l'OP va l'écrire dans le commentaire de la réponse.
  • Yup, l'hypothèse s'est avéré être correct.

InformationsquelleAutor Charles Harrison | 2013-10-16
  1. 77

    utilisation .sur()

    Que votre durée est ajouté dynamiquement de sorte qu'il n'est pas présent au moment de DOM prêt ou de chargement de la page.

    Donc vous devez utiliser Événement Délégation

    Syntaxe

    $( elements ).on( events, selector, data, handler );

    comme ce

    $(document).on('click','.delete_button',function(){
    //code here
});

    ou

    $('parentElementPresesntAtDOMready').on('click','.delete_button',function(){
   //code here
});

    votre code devient

    $(document).ready(function () {
    $(document).on('click', '.delete_button', function () {
        var transaction_id = $(this).attr('id').replace('delete_', '');
        alert("Delete transaction #" + transaction_id);
        return false;
    });
});
    • Merci! Remarque: l'utilisation de $(document).on('click','.delete_button',function(event){ vous permettra également d'utiliser de l'événement.preventDefault()
    • ty c'est un bon point .
    • > $('parentElementPresesntAtDOMready').on('click','.delete_button',délégué); Cela a bien fonctionné pour moi. J'ai ensuite simplifié à une autre syntaxe jQuery, juste pour le plaisir de mes préféré de la syntaxe: $('parentElementPresesntAtDOMready').find('.delete_button').cliquez sur(délégué)
    • Bon ça m'a vraiment aidé!
    InformationsquelleAutor Tushar Gupta - curioustushar
  2. 11

    Il semble que la durée est créé de façon dynamique, vous devez utiliser l'événement de la délégation. Lier à la plus proche statique parent ou d'un document

    $(document).on('click','.delete_button',function(){
   /*Your code*/
});
    InformationsquelleAutor Anton
  3. 0

    Il y a une solution plus simple pour les vieux webkit: jeu de curseur pointeur via CSS pour la plage.
    Testé et de travail sur une musique de web app.

    • Quelle est la pertinence de ceci? La question est à propos de en cliquant sur, et non sur l'apparence du curseur.
    • Bienvenue à Débordement de Pile! Malheureusement, je ne pense pas que ce est ce que la question a été poser la question a été avec des événements viré ou pas de feu, pas le style du curseur.
    InformationsquelleAutor Igor Nardo