我新添加的按钮 returns 的值未定义或根本没有

Question

我正在尝试获取新添加的按钮的值，但它总是记录未定义或什么都不记录。我尝试了很多方法，例如 .val()、.textContent 和 .value，正如我在此处找到的那样。

这是我的代码。

}).done(function (response) {
  var lat = response.data[0].latitude;
  var long = response.data[0].longitude;

  //Appends new button based on recent search
  searchHistory.append(`<button class="col-12 btn border-info m-1" id="prevSearch">${textInput.val().toLowerCase().split(' ').map((s) => s.charAt(0).toUpperCase() + s.substring(1)).join(' ')}</button>`);

  var previousSearch = $("#prevSearch");

  previousSearch.on('click', () => {
    console.log($(this).val();

    console.log(document.getElementById("prevSearch").textContent); 
  })
})

点击功能下的第一个日志returns未定义，而第二个returns实际内容。但是，它仅适用于我尝试 console.log("test").

时附加的第一个按钮

所以总而言之，我有 2 个问题，我无法获取按钮的值，并且在使用简单的控制台日志进行测试时只有第一个按钮有效。

如有任何帮助，我们将不胜感激。

Answer 1

您正在通过 ID 获取按钮。如果您要添加具有相同 ID 的多个元素，那将不起作用，因为 ID 在文档中必须是唯一的。

至于你的按钮值，我会说只使用 $(this).text()。浏览器支持元素内容，因为 HTMLButtonElement.value 历史不完整。

我只使用以下内容

const button = $("<button>", {
  type: "button",
  "class": "prevSearch col-12 btn border-info m-1",
  text: textInput.val().replace(/(^| )[a-z]/g, c => c.toUpperCase())
}).appendTo(searchHistory)

button.on("click", function() {
  console.log($(this).text())
})

您还可以将事件处理移至此代码之外的委托处理程序，该处理程序可以处理所有当前和未来的按钮点击

searchHistory.on("click", ".prevSearch", function() {
  console.log($(this).text())
})

我新添加的按钮 returns 的值未定义或根本没有

The value of my newly appended button returns undefined or nothing at all

javascript

jquery

undefined