时间戳

首页 > 解决方案 > 如何动态添加按钮

jquery - 如何动态添加按钮

问题描述

我正在input field通过一个.onclick事件来捕获价值，在该事件中，我创建了一个带有附加信息的新 div。我正在尝试<button>在新创建的行中的输入旁边添加 3 个标签，但似乎无法弄清楚如何正确添加它们以及 an.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>

标签： jqueryfunctionvariablesbutton

解决方案

    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);
});

推荐阅读