jQuery - Créer dynamiquement un bouton et attacher un gestionnaire d'événements

Question

jQuery - Créer dynamiquement un bouton et attacher un gestionnaire d'événements

Demandé el 1 de Juin, 2011: Quand la question a-t-elle été
128707 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je voudrais ajouter dynamiquement un contrôle de bouton à une table à l'aide de jQuery et attacher un gestionnaire d'événements de clic. J'ai essayé ce qui suit, sans succès :

 $("#myButton").click(function () {
    var test = $('<button>Test</button>').click(function () {
        alert('hi');
    });

    $("#nodeAttributeHeader").attr('style', 'display: table-row;');
    $("#addNodeTable tr:last").before('<tr><td>' + test.html() + '</td></tr>');
});

Le code ci-dessus ajoute avec succès une nouvelle ligne, mais il ne gère pas correctement l'ajout du bouton. Comment pourrais-je accomplir cela en utilisant jQuery ?

Demandé el 1 de Juin, 2011 par senfo

Answer 1

5 Réponses

Answer 2

56voto

Matt Ball Points 165937

L'appel de .html() sérialise l'élément en une chaîne, de sorte que tous les gestionnaires d'événements et autres données associées sont perdus. Voici comment je procéderais :

 $("#myButton").click(function ()
{
    var test = $('<button/>',
    {
        text: 'Test',
        click: function () { alert('hi'); }
    });

    var parent = $('<tr><td></td></tr>').children().append(test).end();

    $("#addNodeTable tr:last").before(parent);
});

Ou,

 $("#myButton").click(function ()
{    
    var test = $('<button/>',
    {
        text: 'Test',
        click: function () { alert('hi'); }
    }).wrap('<tr><td></td></tr>').closest('tr');

    $("#addNodeTable tr:last").before(test);
});

Si vous n'aimez pas passer une carte de propriétés à $() , vous pouvez utiliser à la place

 $('<button/>')
    .text('Test')
    .click(function () { alert('hi'); });

// or

$('<button>Test</button>').click(function () { alert('hi'); });

Répondu el 1 de Juin, 2011 par Matt Ball (165937 Points )

Answer 3

9voto

Schovi Points 725

Solution rapide. Créer la structure entière tr > td > bouton ; puis trouvez le bouton à l'intérieur; attacher un événement dessus ; fin de filtrage de la chaîne et à la et l'insérer dans dom.

 $("#myButton").click(function () {
    var test = $('<tr><td><button>Test</button></td></tr>').find('button').click(function () {
        alert('hi');
    }).end();

    $("#nodeAttributeHeader").attr('style', 'display: table-row;');
    $("#addNodeTable tr:last").before(test);
});

Répondu el 1 de Juin, 2011 par Schovi (725 Points )

Answer 4

8voto

Alnitak Points 143355

Votre problème est que vous convertissez le bouton en extrait HTML lorsque vous l'ajoutez au tableau, mais cet extrait n'est pas le même objet que celui sur lequel se trouve le gestionnaire de clics.

 $("#myButton").click(function () {
    var test = $('<button>Test</button>').click(function () {
        alert('hi');
    });

    $("#nodeAttributeHeader").css('display', 'table-row'); // NB: changed

    var tr = $('<tr>').insertBefore('#addNodeTable tr:last');
    var td = $('<td>').append(test).appendTo(tr);
});

Répondu el 1 de Juin, 2011 par Alnitak (143355 Points )

Answer 5

0voto

Brett Zamir Points 5355

Vous pouvez soit utiliser onclick à l'intérieur du bouton pour vous assurer que l'événement est préservé, soit attacher le gestionnaire de clic de bouton en trouvant le bouton après son insertion. L' test.html() ne sérialisera pas l'événement.

Répondu el 1 de Juin, 2011 par Brett Zamir (5355 Points )

Answer 6

0voto

jnoreiga Points 684

Vous venez d'ajouter la chaîne html. Pas l'élément que vous avez créé avec un écouteur d'événement de clic.

Essaye ça:

 <html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
    <table id="addNodeTable">
        <tr>
            <td>
                Row 1
            </td>
        </tr>
        <tr >
            <td>
                Row 2
            </td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function() {
        var test = $('<button>Test</button>').click(function () {
            alert('hi');
        });
        $("#addNodeTable tr:last").append('<tr><td></td></tr>').find("td:last").append(test);

    });
</script>

Répondu el 1 de Juin, 2011 par jnoreiga (684 Points )

jQuery - Créer dynamiquement un bouton et attacher un gestionnaire d'événements

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

jQuery - Créer dynamiquement un bouton et attacher un gestionnaire d'événements

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: