2
votes

Comment ajouter un bouton dynamiquement avec une valeur onclick

Je souhaite ajouter des onglets de manière dynamique lorsque je clique sur un bouton. Je peux ajouter le contenu de l'onglet et le bouton de l'onglet lorsque j'ai cliqué sur le bouton, mais le bouton de l'onglet résultant n'a pas l'attribut onclick .

<button class="tablinks" onclick="openCity(event, 'Button1')">Button1</button>

la fonction ci-dessus a ajoutez le bouton mais cela donne

<button class="tablinks" onclick="openCity(event, " button1')'="">Button1</button>

au lieu de

function add_row()
{
  $rowno=$("#numOfKids").val();
  $rowno=$rowno++;
  $buttonNo = "Button"+$rowno;
  $button = "<button class='tablinks' onclick='openCity(event, '"+$buttonNo+"')'>Button"+$rowno+"</button>";
  $("#divAnak").append("<div id='Anak"+$rowno+"' class='tabcontent'><h3>London</h3><p>London is the capital city of England.</p></div>");
  $("#tabs").append($button);
}

javascript jquery html css button

0 commentaires

3 Réponses :

2
votes

Essayez de le faire de cette façon:

$button = '<button class="tablinks" onclick="openCity(event, \'' + $buttonNo + '\')" > Button '+$rowno+' </button>';

1 commentaires

@PhilipChristianto heureux de vous aider :-)

1
votes

Vous devez penser à quand vous utilisez ' et " - dans votre code, vous fermez le onclick =' avant $ buttonNo avec un '.

Il est clair que vous comprenez cela dans une certaine mesure car vous avez $ button = " puis utilisez ' dans ce ", mais comme vous commencez par " , vous devez utiliser ' pour les guillemets à l'intérieur.

Vous avez deux choix, soit échapper au ' ou ", soit l’ajouter en utilisant l’autre.

<button class='tablinks' onclick='openCity(event, "Button1")'>Button1</button>

Ni l'un ni l'autre vous donnera:

<button class="tablinks" onclick="openCity(event, 'Button1')">Button1</button>

mais à la place:

$button = "<button class='tablinks' onclick='openCity(event, \""+$buttonNo+"\")'>Button"+$rowno+"</button>";

$button = "<button class='tablinks' onclick='openCity(event, "+'"'+$buttonNo+'"'+")'>Button"+$rowno+"</button>";

qui est l'équivalent.

0 commentaires

0
votes

Le problème est dû au fait que vos guillemets ne correspondent pas autour de la valeur onclick :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="numOfKids" value="1" />
<div id="tabs"></div>
<div id="divAnak"></div>

function add_row() {
  var rowNo = parseInt($("#numOfKids").val(), 10);
  rowNo = rowNo++;
  var buttonNo = "Button" + rowNo;
  var buttonHtml = '<button class="tablinks" data-button-no="' + buttonNo + '">Button' + rowNo + '</button>';
  $("#divAnak").append("<div id='Anak" + rowNo + "' class='tabcontent'><h3>London</h3><p>London is the capital city of England.</p></div>");
  $("#tabs").append(buttonHtml);
}

add_row();

$('#tabs').on('click', '.tablinks', function(e) {
  console.log($(this).data('button-no'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="numOfKids" value="1" />
<div id="tabs"></div>
<div id="divAnak"></div>

Cela étant dit, il est de loin préférable d'éviter d'utiliser les attributs d'événement on * obsolètes. Comme vous avez déjà inclus jQuery dans la page, vous pouvez simplifier cela en utilisant un gestionnaire d'événements délégué à la place et en stockant toutes les métadonnées dans un attribut data :

function add_row() {
  var rowNo = parseInt($("#numOfKids").val(), 10);
  rowNo = rowNo++;
  var buttonNo = "Button" + rowNo;
  console.log(buttonNo);
  var buttonHtml = '<button class="tablinks" onclick="openCity(event, \'' + buttonNo + '\')">Button' + rowNo + '</button>';
  $("#divAnak").append("<div id='Anak" + rowNo + "' class='tabcontent'><h3>London</h3><p>London is the capital city of England.</p></div>");
  $("#tabs").append(buttonHtml);
}

add_row();

function openCity(e, buttonNo) {
  console.log(buttonNo);
}

'<button class="tablinks" onclick="openCity(event, \'' + buttonNo + '\')">Button' + rowNo + '</button>'

Vous pourriez potentiellement faire la même chose avec la fonction add_row () , mais cela dépend du moment où elle est appelée.

Une dernière chose à noter est que vous pouvez facilement vous retrouver avec des attributs id en double en utilisant cette logique, si la même valeur de #numOfKids est utilisée lorsque add_row () est appelé. Cela devrait être évité, je vous suggère donc de changer votre logique pour éviter de créer entièrement ces attributs id .

0 commentaires