如何使用自己的js函数生成按钮?

时间:2017-06-16 22:48:09

标签: javascript jquery ajax

我有从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>

有任何解决方案的帮助或建议吗?

1 个答案:

答案 0 :(得分:0)

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

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

对于“追加”输入和锚点对,请使用$.append。您目前正在做的只是使用循环中的最后一个元素数据更新#nie

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

请注意,请勿在{{1​​}}设置中将async设置为false。这有意想不到的结果,并使浏览器缓慢指向冻结和崩溃。 jQuery ajax async: false causes a strange warning?

$.ajax