如何使用jquery添加标题可编辑的按钮？

Question

我有一个简单的部分，用户可以在其中单击添加多个按钮，我希望这些按钮名称是可编辑的，这意味着用户可以根据需要编辑和保存按钮标题。

这是使用单击添加按钮时UI的外观

我希望用户能够通过将鼠标放在输入按钮名称上来添加按钮标题。

当用户将鼠标放在输入按钮名称上时，一个简单的弹出文本区域将显示如下内容。

$(document).ready(function() {

  $('#btn').on('click', function() {
    var buttonWithText = $("<div class='clickarea'>Enter button name</div>")
    $(".main-container").append(buttonWithText);
  })

})

.main-container {
  height: 300px;
  width: 400px;
  background: red;
}

.clickarea {
  height: 60px;
  width: 50%;
  /* margin: 20px; */
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 80px auto;
}

#btn {
  cursor: pointer;
  margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">

</div>
<button id="btn">Add button</button>

Answer 1

对于一个非常简单的解决方案，您可以使用prompt：

$(document).ready(function() {

  $('#btn').on('click', function() {
    let text = prompt('enter button text:');
    var buttonWithText = $("<div class='clickarea'>"+text+"</div>")
    $(".main-container").append(buttonWithText);
  })

})

.main-container {
  height: 300px;
  width: 400px;
  background: red;
}

.clickarea {
  height: 60px;
  width: 50%;
  /* margin: 20px; */
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 80px auto;
}

#btn {
  cursor: pointer;
  margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">

</div>
<button id="btn">Add button</button>

Answer 2

如果我理解正确，那么您需要的功能如下。您可以通过利用x.str.contains()然后创建一个新按钮并将其添加到DOM上来实现此目的：

编辑：

我已根据您的评论更新了代码。我相信它现在可以根据您描述的第二种情况工作。让我知道这似乎不是所需的功能。

addEventListener

function init() {
  const buttonEl = document.querySelector('#button-el');
  const buttonContainer = document.querySelector('#button-container');
  const alertButtonText = e => alert(`You clicked: ${e.target.value}`);
  const promptForText = e => {
    const text = window.prompt('Enter button text');
    if (text && text.trim().length) {
      e.target.setAttribute('value', text);
      e.target.removeEventListener('mouseover', promptForText);
      e.target.addEventListener('click', alertButtonText);
    }
  }

  buttonEl.addEventListener('click', e => {
    const newButtonEl = document.createElement('input');
    newButtonEl.setAttribute('type', 'button');
    newButtonEl.addEventListener('mouseover', promptForText);
    buttonContainer.appendChild(newButtonEl);
  });
}

init();

#button-container>input {
  height: 30px;
  width: 40%;
  background: green;
  display: block;
  align-items: center;
  margin: 20px auto;
}

body {
  background: red;
}

#button-el {
  cursor: pointer;
  margin: 20px;
}