Question

首先，我想说我对jQuery很新，我刚刚开始昨天，所以我对某些逻辑有点模糊，如果我没有使用最好的实践，请不要犹豫，纠正我

基本上我想做的是：

我有一个带几个按钮的网页
当我点击其中一个按钮时，我将加载一个包含几个元素的div（根据按下的按钮而不同）
在某些情况下，有一个下拉列表，我希望在加载时用ajax填充

我可以正确处理按钮和div加载，但是我的下拉列表有点麻烦。我想在文档中加载下拉列表时执行ajax调用，但我无法弄清楚如何执行此操作。

单击其中一个按钮时创建的一点HTML：

<div class='content'>
  <select class='dropdown'></select>
</div>

这只是在我点击按钮后添加到文档中，它首先不存在（基本上是因为不同的按钮会在内容div中加载不同的东西）

我在JS中首次尝试的内容：

$('select.dropdown').load(function() {
   alert('dropdown loaded');
});

这根本不起作用，无论我把这一点JS放在哪里都没有出现警报（我在创建html中的select之前尝试过它，我试过把它放在后面，不管我从来没有过警报）

所以我尝试使用ready函数：

$('select.dropdown').ready(function() {
  alert('dropdown loaded');
});

这很有效。我用.post（）替换了警报，如下所示：

$('select.dropdown').ready(function() {
  $.post("url.php", {arg: 'arg'}, function(data) {
    $.each(data, function() {
      $('select.dropdown').append("html stuff with <option>");
    });
  }, 'json');

这很有效。但问题是，现在我只想填充触发.ready（）事件的select标签，所以我尝试使用$（this）：

$('select.dropdown').ready(function() {
  $.post("url.php", {arg: 'arg'}, function(data) {
    $.each(data, function() {
      $(this).append("html stuff with <option>");
    });
  }, 'json');

这不起作用。如果我尝试添加警报以查看“此”引用的内容：

$('select.dropdown').ready(function() {
  alert($(this).attr('class'));
  $.post("url.php", {arg: 'arg'}, function(data) {
    $.each(data, function() {
      $(this).append("html stuff with <option>");
    });
  }, 'json');

我得到“未定义”。

基本上我的问题是：

为什么.ready（）工作而不是.load（）？
如何在.ready（）函数中使用$（this）来引用触发ready事件的下拉列表？

我想使用$（this）而不是第一个解决方案的原因是因为我将动态添加其他下拉列表，它将使用相同的HTML标记和相同的JS代码（如果可能），所以我必须区分哪个下拉开了准备好的活动。

关于如何做的任何想法/建议？

Answer 1

是否有任何特殊原因在绘画之前无法填充下拉列表？以这种方式链接事件要容易得多。那将是最简单的选择。

如果失败，您可以在.each或append事件上使用appendTo回调，以便在将下拉列表添加到DOM后填充该下拉列表。你没有提供那段代码片段，所以我对这个做了一些假设。

示例：

var content = $("<div class='content'>").appendTo(body);

$("<select class='dropdown'></select>")
.appendTo(content).each(function() {
  $.post("url.php", {arg: 'arg'}, function(data) {
    $.each(data, function() {
      $(this).append("<option>");
    });
  });
});

Answer 2

如果您无法在创建时附加选项，而另一张海报建议那么您可以使用自定义事件：

$('#mybuttonid').click(function(){
    //load whatever here
    $('select.dropdown').trigger('dropReady');//change selector to get right one
});
$(document).on('dropReady','select.dropdown',function(){
    //do what you need
});

注意尝试使用包装器而不是用于锚事件的文档。

显示下拉列表时填充下拉列表？

2 个答案: