2

首先我想说我对 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.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() 事件的选择标签，所以我尝试使用 $(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) 来引用触发 ready 事件的下拉菜单？

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

关于如何做到这一点的任何想法/建议？

4

2 回答 2

0

如果您不能像另一张海报建议的那样在创建时附加选项，那么也许您可以使用自定义事件：

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

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

于 2013-05-17T13:57:21.283 回答
0

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

如果做不到这一点，你可以在or事件上使用.each回调来填充下拉列表，一旦它被添加到 DOM。你没有提供那个代码片段，所以我对这个做了一些假设。appendappendTo

例子：

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>");
    });
  });
});
于 2013-05-17T13:47:23.613 回答