如何生成一个自带js函数的按钮？答案

【问题标题】：How to generate a button with its own js function?如何生成一个自带js函数的按钮？
【发布时间】：2017-06-16 22:48:09
【问题描述】：

我从 ajax 检索到数据，我需要解析它以生成具有不同 <input> 值的输入。在点击<a> 时，应该接近站立input 值并转到ajax

<script type="text/javascript">
function proceed() {
  var ID = document.getElementById('btnid').value;//probably that`s the wort way, because all of `<a>` buttons would have same id
  //ajax with ID to proceed further
}
$.ajax({
  async: false,
  type: "POST",
  url: "../api/",
  data: {'data': "mydata"},
  dataType: 'JSON',
  complete: function (res) {
    for(var i = 0; i < 10; i++) {
    document.getElementById('nie').innerHTML = "
      <ul class=\"somec\">
      <li class=\"liclass\">
      </input id=\"btnid\" value=\""+res.response[i].animal+"\" class=\"thatclass\" onclick=\"proceed();\"></input>//different values
      <a id="clicker" onclick="proceed()"></a>//clickable link
      </li>
      </ul>
    ";
    }
  });
</script>
<html>
<div id="nie">
</div>
</html>

对解决方案有任何帮助或建议吗？

【问题讨论】：

这里只是一个旁注，jQuery 不仅仅提供 $.ajax 方法。
生成的input 没有type...都会有相同的id，这不好。并且锚点<a> 没有文字，所以你不会看到它们。 --- 所以基本的建议第一是在进入 Ajax 生成的元素之前寻找一个 HTML 教程..

标签： javascript jquery ajax

【解决方案1】：

在一个 DOM 中不能有多个 id - 只允许一个唯一的 id。由于这里使用了 jQuery，因此您可以利用它提供的其他方法和 API。

首先，我会将循环移动到$.ajax 的成功处理程序，因为这样可以确保我有从服务器返回的数据。

至于“附加”输入和锚对，使用$.append。您当前所做的只是使用循环中最后一个元素的数据更新#nie。

对于事件，委托对锚点的点击。这更好，因为您可能会继续添加更多元素，因此您必须将它们绑定到事件。

请不要在$.ajax 设置中将async 设置为false。这会产生意想不到的结果，并使浏览器缓慢指向冻结和崩溃。 jQuery ajax async: false causes a strange warning?

$(function(){

  var $nie = $('#nie');

  // Delegate the click event
  $(document).on('click', '.clicker' function(){

    var id = $(this).siblings('input').val();
    // Use id in upcoming AJAX request.
  });

  $.ajax({
    type: "POST",
    url: "../api/",
    data: {'data': "mydata"},
    dataType: 'JSON',
    success: function (res){

      $.each(res.response, function(i, r){

        $nie.appeand('<ul class="somec">\
        <li class="liclass">\
        <input value="'+ r.animal+ '" class="thatclass"/>\
        <a class="clicker"></a>\
        </li>\
        </ul>');
      });
    }
  });
});

【讨论】：

哇@AdamAzad ！我真的很感动。完美运行，我得到了你，感谢上面提到的所有内容，帮助了很多
@Khuma，如果对您有帮助，您可以接受答案。 :)
是的，当然。 ))