使用 Ajax 附加到 Jade 中的下拉列表

Question

我正在尝试将条目添加到我在 .jade 文件中定义的下拉列表中，如下所示。

extends layout

block content
    script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
    script(src='/javascripts/addsystem.js')
    h1= title
    p Testing


    select#allSystems

我的 Ajax 方法如下所示：

var select = $('#allSystems');
console.log("Runing script")


$.ajax({
  url: '/submit/getAllSystems',
  dataType:'JSON',
  success:function(data){

    $.each(test.system, function(key, val) {
        select.append('<option id="' + val.id + '">' + val.name + '</option>'); 
    })
  }
});

Ajax 脚本位于 Jade 文件中包含的 JS 文件中。 （Jquery 也包含在 Jade 文件中）。

一切似乎都工作正常，除了追加。 IE。控制台日志一直显示良好的数据，当在 Ajax 脚本中打印选择对象时，浏览器将其识别为 HTML 元素。

打印正在运行的“console.log(select);”时，Firefox 控制台显示如下：

Object { context: HTMLDocument → submit, selector: "#allSystems" }

知道我做错了什么吗？

Answer 1

Jade 是一种模板语言，必须使用数据编译和执行才能呈现 HTML。 JQuery 不会自动为您执行此操作，这就是您在 select.append 处注释掉的尝试失败的原因。

自己构建 HTML 是可行的（尽管它会产生一些难看的代码，而且我仍然不喜欢字符串连接）。但是，当您这样做时，您更改为.appendTo，它将尝试获取您的select 对象并将其附加到option，我认为这不是您想要的。

试一试：

select.append('<option id="' + val.id + '">' + val.name + '</option>');

如果这不起作用，那么你的选择器有一些东西可以让你得到select 变量。

* 编辑 * 我在您的 Jade 中注意到您在 DOM 的其余部分之前加载脚本。如果 addsystem.js 的内容如您所描述，那么您正在获取数据并尝试将其附加到尚不存在的 DOM 节点。尝试像这样包装它：

$(function(){ /** your code **/ })

这是 jQuery 在 DOM 完全加载后执行操作的方法的简写。