Question

这是一个javascript函数我必须根据onload期间文本文件中的内容动态创建按钮。这些按钮似乎根本无法创建，虽然它能够读取文件并且我使用警报消息来检查var按钮是否正确。

function createButtons(){
    $(document).ready(function() {
        alert("1");
      $.ajax({
        url : 'http://localhost:8080/SSAD/type.txt',
        dataType : "text",
        success : function (filecontent) {
          var lines=filecontent.split('\n');
          $.each(lines, function() {
            if (this!='') {
              var button='<button type="button" class="btn btn-block btn-inverse active" data-toggle="button tooltip" title="Click this to enable/disable viewing of'+this+'" onclick="toggleVisibility('+"'"+this+"'"+')">'+this+'</button>';
              $("#crisisButtons").append(button);
            }
          });
        }
      });
    });
}

HTML：

<div class="crisisButtons"></div>

<script type="text/javascript">window.onload = createButtons();</script>

Answer 1

您没有分配事件处理程序，而是调用它。正在调用函数createButtons，它返回的任何内容都被分配给window.onload。

window.onload = createButtons();

需要

window.onload = createButtons;

你真正应该使用的是addEventListener

您遇到的另一个问题是您正在使用DOMReady和onload。两个不同的事件做不同的事情！选一个，不要同时使用。

更改您的代码，只是

$(function() {
    alert("1");
  $.ajax({
    url : 'http://localhost:8080/SSAD/type.txt',
    dataType : "text",
    success : function (filecontent) {
      var lines=filecontent.split('\n');
      $.each(lines, function() {
        if (this!='') {
          var button='<button type="button" class="btn btn-block btn-inverse active" data-toggle="button tooltip" title="Click this to enable/disable viewing of'+this+'" onclick="toggleVisibility('+"'"+this+"'"+')">'+this+'</button>';
          $("#crisisButtons").append(button);
        }
      });
    }
  });
});

并在Ajax调用上使用错误处理程序以确保没有被触发。

修改

为什么没有出现

$("#crisisButtons").append(button); <-- ID selector <div class="crisisButtons"></div> <-- class name

所以将id选择器更改为一个类，然后你得到

$(function() { alert("1"); $.ajax({ url : 'http://localhost:8080/SSAD/type.txt', dataType : "text", success : function (filecontent) { var lines=filecontent.split('\n'); $.each(lines, function() { if (this!='') { var button='<button type="button" class="btn btn-block btn-inverse active" data-toggle="button tooltip" title="Click this to enable/disable viewing of'+this+'" onclick="toggleVisibility('+"'"+this+"'"+')">'+this+'</button>'; $(".crisisButtons").append(button); } }); } }); });

Ajax / Javascript动态创建按钮的问题

1 个答案: