web-dev-qa-db-fra.com

Comment ajouter un bouton dynamiquement en utilisant jquery

Ma tâche est d’ajouter des boutons dynamiquement à la division. Voici le code que je suis pour ajouter des boutons dynamiquement, mais cela ne fonctionne pas, donnez-moi une solution 

<!DOCTYPE html>
    <html>
    <head>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
         <script type="text/javascript">
             function test() {
                var r = "$('<input/>').attr({
                             type: "button",
                             id: "field"
                        })";
             }
             $("body").append(r);
         </script>
    </head>
    <body>
         <button onclick="test()">Insert after</button> 
    </body>
    </html>

code pour ajouter le bouton sur div lorsque la page est chargée mais que cela ne fonctionne pas

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function test() {
    var r=$('<input/>').attr({
        type: "button",
        id: "field"

    });
    test().append("#test");    
}
</script>
</head>
<body>
<div id="test"></div>
 <button id="insertAfterBtn" onclick="test()">Insert after</button>
</body>
</html>
javascriptjqueryjson
31
Souparnika

Votre ligne d’ajout doit être dans votre fonction test()

MODIFIER:

Voici deux versions:

Version 1: écouteur jQuery

$(function(){
    $('button').on('click',function(){
        var r= $('<input type="button" value="new button"/>');
        $("body").append(r);
    });
});

DEMO ICI

Version 2: Avec une fonction (comme votre exemple)

function createInput(){
    var $input = $('<input type="button" value="new button" />');
    $input.appendTo($("body"));
}

DEMO ICI

Remarque: Cette opération peut être réalisée avec .appendTo ou avec .append.

44
Robin Leboeuf

l'instruction $("body").append(r) doit faire partie de la fonction test. De plus, " a été égaré dans la méthode test 

function test() {
    var r=$('<input/>').attr({
        type: "button",
        id: "field",
        value: 'new'
    });
    $("body").append(r);    
}

Démo: Fiddle

Mettre à jour
Dans ce cas, essayez une solution plus jQuery-ish

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
          jQuery(function($){
              $('#mybutton').one('click', function(){
                  var r=$('<input/>').attr({
                      type: "button",
                      id: "field",
                      value: 'new'
                  });
                  $("body").append(r);   
              })
          })
        </script>
    </head>
    <body>
        <button id="mybutton">Insert after</button> 
    </body>
</html>

Démo: Plunker

3
Arun P Johny

Essaye ça:

<script type="text/javascript">

function test()
{
    if($('input#field').length==0)
    {
       $('<input type="button" id="field"/>').appendTo('body');
     }
}
</script>
2
sangram parmar

Pour ajouter un bouton dynamique à la volée;

<!DOCTYPE html>
<html>
<head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script type="text/javascript">
        function newButtonClickListener() {
                alert("Hello World");
        }
         function test() {
            var r = $('<input/>').attr({
                         type: "button",
                         id: "field",
                         value: "New Button",
                         onclick: "newButtonClickListener()"
                    });

            $("body").append(r);
         }
     </script>
</head>
<body>
     <button onclick="test()">Insert after</button><br/> 
</body>
</html>

Lien démo

0
Shubham Chandra