Wie eine Schaltfläche dynamisch mit Jquery

Meine Aufgabe hinzuzufügen ist, um zum div dynamisch hinzuzufügen .. hier ist der Code, den ich folge Knopf dynamisch hinzuzufügen, aber es funktioniert nicht mit mir bitte eine Lösung geben für diesenWie eine Schaltfläche dynamisch mit Jquery

<!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-Taste auf div anhängen, wenn Seite geladen wird, aber es ist 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>

Quelle

2013-08-14 Souparnika

'$ ("body") anhängen (r);' muss in der Funktion gehen.. – putvande

Bitte beziehen Sie sich auf diese Antwort http://StackOverflow.com/A/6205324/3530081 –

Ihre append Linie arbeiten

in Ihrer test() Funktion sein muss

EDIT:

Hier sind zwei Versionen:

Version 1: jQuery Zuhörer

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

DEMO HERE

Version 2: Mit einer Funktion (wie Ihr Beispiel)

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

DEMO HERE

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

Quelle

2013-08-14 08:23:32

Entschuldigung, ich kann nicht aufholen Sie sagen – Souparnika

Sie sollten Ihre .append() -Funktion INSIDE Ihrer Test() -Funktion verwenden, weil Sie Die neue Eingabe soll jedes Mal, wenn Sie auf die Schaltfläche klicken, an Ihren Körper angehängt werden, dh jedes Mal, wenn Sie Ihre Funktion ausführen, sollten Sie Ihre Zeile $ ("body") einfügen. append (r); in Ihrer Funktion, anstatt es nachzustellen. –

Siehe meine Bearbeitung für Codeinformationen –

die $("body").append(r) Anweisung innerhalb der test Funktion sein soll, wurde auch dort fehl am Platz " in test Methode

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

Demo: Fiddle

aktualisiert
In diesem Fall versuchen, ein 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

Quelle

2013-08-14 08:24:03

Ich möchte der Erste sein, der Ihnen dafür danken, dass Sie diesen Code lesbar gemacht haben ... Er war * wirklich * schlecht formatiert –

Wie können wir dieser Schaltfläche einen Mehrwert hinzufügen? – Souparnika

@ user2236221 sehen Sie das Update, es zeigt 'new' als Wert –

-1

Arbeits zupfen here.

den neuen Eingang hinzuzufügen nur einmal, verwenden Sie folgenden Code:

$(document).ready(function() 
{ 
    $("#insertAfterBtn").one("click", function(e) 
    { 
    var r = $('<input/>', { type: "button", id: "field", value: "I'm a button" }); 

    $("body").append(r); 
    }); 
});

[... Quelle hier gestrippt ...]

<body> 
    <button id="insertAfterBtn">Insert after</button> 
</body>

[... Quelle hier abgestreift. ..]

Um es in w3 Editor, copy/paste den Code unten in 'Quellcode' Abschnitt innerhalb w3 Editor funktioniert und drücken Sie dann 'Code-Senden':

<!DOCTYPE html> 
<html> 

    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    </head> 

    <body> 
    <button id="insertAfterBtn">Insert only one button after</button> 
    <div class="myClass"></div> 
    <div id="myId"></div> 
    </body> 

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    // when dom is ready, call this method to add an input to 'body' tag. 
    addInputTo($("body")); 

    // when dom is ready, call this method to add an input to a div with class=myClass 
    addInputTo($(".myClass")); 

    // when dom is ready, call this method to add an input to a div with id=myId 
    addInputTo($("#myId")); 

    $("#insertAfterBtn").one("click", function(e) 
    { 
    var r = $('<input/>', { type: "button", id: "field", value: "I'm a button" }); 

    $("body").append(r); 
    }); 
}); 

function addInputTo(container) 
{ 
    var inputToAdd = $("<input/>", { type: "button", id: "field", value: "I was added on page load" }); 

    container.append(inputToAdd); 
} 
</script> 

</html>

Quelle

2013-08-14 08:27:23

dieser Code funktioniert nicht .. – Souparnika

@ user2236221 Haben Sie überprüft, dass Plunk? es funktioniert gut auf meiner Seite, klicken Sie auf die Schaltfläche wird jedes Mal eine neue Schaltfläche hinzufügen. Welchen Browser benutzen Sie? Hast du den Code ausprobiert und es gab Fehler? –

bitte giv mir eine Lösung zum Anhängen Schaltfläche an einem Div, wenn die Seite lädt – Souparnika

-1

dieses Versuchen

function test() 
{ 
    $("body").append("<input type='button' id='field' />"); 
}

Quelle

2013-08-14 08:27:39

Versuchen Sie folgendes:

<script type="text/javascript"> 

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

Quelle

2013-08-14 08:28:19

Taste sollte nur einmal angehängt werden, wie wir dies tun können – Souparnika

@ user2236221 überprüfen Sie die aktualisierte Antwort, wenn die Eingabe mit ID-Feld nicht vorhanden ist, als es an Körper anderen weise nicht anhängen .. –

wie können wir ID, Wert etc durch Funktion wie this_app.CreateButton (id, text, primaryIcon, secondaryIcon, className); – Souparnika

Wie eine Schaltfläche dynamisch mit Jquery

Antwort

Verwandte Themen