如何动态添加按钮

Question

我正在通过.onclick 事件从input field 中捕获值，在该事件中我创建了一个带有附加信息的新div。我正在尝试在新创建的行中的输入旁边添加 3 个 <button> 标签，但似乎无法弄清楚如何正确添加它们以及 .addClass 以便我也可以设置它们的样式。

我尝试了几种添加<button> div 的方法，但无法解决问题。其他一切都很好，但我需要使用新类添加按钮。

$("#search-submit").on("click", function() {
  // variable for using the search functionality and adding it to the itinerary for the first day
  var itineraryInput = $("#search").val();
  var row = $("<div>");
  row.addClass("attraction");
  row.append("<p>" + itineraryInput + "</p>");
  row.append("<button>" + "<button>" + "<button>");
  $("#first").prepend(row);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map" style="height: 100%"></div>
<div class="row mb-2">
  <div class="col">
    <input type="text" class="form-control" id="search" placeholder="Search for an attraction...">
    <button id="search-submit" class="btn btn-lg pull-right">Add To Your Itinerary!</button>
  </div>
</div>

<div class="trans_container">
  <div id="trans_first"></div>
  <div id="trans_second"></div>
</div>

<div class="acontainer">
  <div id="first"></div>
  <div id="second"></div>
  <div id="clear"></div>
</div>

Answer 1

    var $button = $("button")

// Adding event listener for when user clicks the add-bttn
$button.on("click", function() {

// variable for using the search functionality and adding it to the itinerary for the first day
var itineraryInput = ($("#search").val() === "") ? " " : $("#search").val();

console.log(itineraryInput);

var row = $("<div>");
    row.addClass("attraction");
    row.append("<p>" + $('div.attraction').length + "</p>");
    row.append("<button>" + itineraryInput + "</button>");

//providing the last thing I tried to do to make it work.
// var attButton = $("<button>");
//     attButton.addClass("attButton");
//     attButton.append("<button>" );

    $("#first").prepend(row);
});

Answer 2

我们已经为按钮类创建了数组，然后使用 addClass 函数将这些类添加到按钮中。请在尝试我们的脚本后分享您的反馈。

$("#search-submit").on("click", function() {

  // variable for using the search functionality and adding it to the itinerary for the first day
  var itineraryInput = $("#search").val();

  console.log(itineraryInput);

  var classes = ["classA", "classB", "classC"]; // array of classes for button
  var row = $("<div>");
  row.addClass("attraction");
  row.append("<p>" + itineraryInput + "</p>");
  for (var i = 0; i < 3; i++) {
    $("<button>" + itineraryInput + "</button>").addClass(classes[i]).appendTo(row); // added class to button
  }

  // var attButton = $("<button>");
  //     attButton.addClass("attButton");
  //     attButton.append("<button>" );

  $("#first").prepend(row);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map" style="height: 100%"></div>
<div class="row mb-2">
  <div class="col">
    <input type="text" class="form-control" id="search" placeholder="Search for an attraction...">
    <button id="search-submit" class="btn btn-lg pull-right">Add To Your Itinerary!</button>
  </div>
</div>

<div class="trans_container">
  <div id="trans_first"></div>
  <div id="trans_second"></div>
</div>

<div class="acontainer">
  <div id="first"></div>
  <div id="second"></div>
  <div id="clear"></div>
</div>