0

这是一个 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>
4

1 回答 1

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);
        }
      });
    }
  });
});
于 2013-04-01T14:53:17.303 回答