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

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中创建选择之前，我尝试将其放在之后，无论我从未得到什么警报)

所以我尝试使用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');

但这没有用。如果我尝试添加警报以查看“this”引用的内容:

$('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) 来引用触发就绪事件的下拉列表？

我想使用 $(this) 而不是第一个解决方案的原因是因为我将动态添加其他下拉列表，它将使用相同的 HTML 标记和相同的 JS 代码(如果可能)，所以我必须区分哪个下拉菜单触发了就绪事件。

关于如何做到这一点有什么想法/建议吗？

Answer 1

如果您无法按照另一张海报的建议在创建时附加选项，那么也许您可以使用自定义事件:

$('#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
});

注意尝试使用包装器而不是文档来处理 anchor 事件。