web-dev-qa-db-de.com

So fügen Sie eine Schaltfläche dynamisch mit Jquery hinzu

Meine Aufgabe ist es, die Schaltfläche dynamisch zum div hinzuzufügen. Hier ist der Code, dem ich folge, um die Schaltfläche dynamisch hinzuzufügen, aber es funktioniert nicht 

<!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 zum Anhängen der Schaltfläche an div, wenn Seite geladen wird, aber es funktioniert nicht

<!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>
31
Souparnika

Ihre Append-Zeile muss sich in Ihrer test()-Funktion befinden

EDIT:

Hier sind zwei Versionen:

Version 1: jQuery Listener

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

DEMO HIER

Version 2: Mit einer Funktion (wie in Ihrem Beispiel)

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

DEMO HIER

Hinweis: Dies kann entweder mit .appendTo oder mit .append erfolgen.

44
Robin Leboeuf

die $("body").append(r)-Anweisung sollte sich innerhalb der test-Funktion befinden, außerdem wurde " in der test-Methode falsch platziert 

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

Demo: Fiddle

Update
Versuchen Sie in diesem Fall eine jQuery-ish-Lösung

<!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>

Demo: Plunker

3
Arun P Johny

Versuche dies:

<script type="text/javascript">

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

Dynamische Schaltfläche im laufenden Betrieb hinzufügen;

<!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>

Demo-Link

0
Shubham Chandra