Lorsque j'essaie de créer des boutons à partir de jQuery, le texte apparaît en dehors de l'élément de bouton que j'ai créé. J'ai essayé de créer chaque bouton individuellement et en groupe, et aucune des méthodes ne semble fonctionner. Qu'est-ce que je fais mal?

<div id = 'output_div'></div>

var main = function(){
    var selections = ['derp', 'herp', 'merp', 'foo'];


    //individually creating each button
    for(var i = 0; i < selections.length; i++){
        $('#output_div').append("<input type='button'>" + selections[i] +
          "</input>");
    };

    $('#output_div').append('<br><br>');


    //buttons all created at the same time
    var group_buttons = '';

    for(var i = 0; i < selections.length; i++){
        group_buttons += ("<input type='button'>" + selections[i] + "</input>");
    };

    $('#output_div').append(group_buttons);
};

$(document).ready(main);

https://jsfiddle.net/fjr56Lsj/4/

1
Cycling Paper 9 août 2016 à 23:01

4 réponses

Meilleure réponse

Définissez le texte du bouton en tant qu'attribut value de <input> , ou restituez les boutons en tant que <button> :

$(function() {
  var selections = ['derp', 'herp', 'merp', 'foo'];

  for (var i = 0; i < selections.length; i++) {
    $('#output_div').append("<input type='button' value='" + selections[i] + "' />");
  };

  $('#output_div').append('<br><br>');

  for (var i = 0; i < selections.length; i++) {
    $('#output_div').append("<button>" + selections[i] + "</button>");
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='output_div'></div>
1
Timo 9 août 2016 à 20:08

Le bouton peut également être créé de cette manière:

$('<button/>', {
    text: selections[i]
 })
var main = function() {
  var selections = ['derp', 'herp', 'merp', 'foo'];


  //individually creating each button
  for (var i = 0; i < selections.length; i++) {

    $('#output_div').append($('<button/>', {
      text: selections[i]
    }));
  };

  $('#output_div').append('<br><br>');
};

$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='output_div'>

</div>
1
Ayan 9 août 2016 à 20:08

Une autre façon de créer un bouton à l'aide de jquery serait la suivante:

var dynamicButton = $('<button/>', {
    text: selections[i],
    id: 'dynamicButton_'+i
});
$('#output_div').append(dynamicButton);
2
kdpatil 9 août 2016 à 20:15

Comme attribut de bouton de type d'entrée, utilisez value = selections [i] (gardez les guillemets Ur prudents) 😉 sinon utilisez la balise button à la place de l'élément input

1
AB Udhay 9 août 2016 à 20:07