为什么我不能选择在JQuery中加载$ .get的元素

Question

我有一系列从JSON加载的按钮，而这些按钮反过来会消失并在点击时追加其他按钮。

像这样（按钮的第一级是已经在页面上，适当反应等事件，如悬停）：

... 
    $(document).on('click', "#subcategoryButtons button", function() { 
      getTemplate('imgMenu.html'); 
      var entryIndex = this.id[0]; 
      var subentryIndex; 
      if (this.id[1] === '0') 
      { 
       subentryIndex = this.id.slice(-1); 
      } 
      else 
      { 
       subentryIndex = this.id.slice(-2); 
      } 
      var imgs = data.category[entryIndex].subcategory[subentryIndex].imgs; 
      $.each(imgs, function (imgIndex) 
      { 
       var imgName = data.category[entryIndex].subcategory[subentryIndex].imgs[imgIndex].imgName; 
       var imgId = data.category[entryIndex].subcategory[subentryIndex].imgs[imgIndex].imgId; 
       $('#imgButtons span').append('<button id="' + imgId + '">' + imgName + '</button>'); 
      }); 
     }); 
    } 
    ; 
... 

这是正在加载的模板的内容：

<div id="imgSpace"> 
    <aside id="overlayRight"> 
     Right Overlay space 
    </aside> 
    <div id="overlayBottom"> 
     Bottom Overlay 
    </div> 
</div> 
<nav id="imgButtons" class="resizable"> 
    <span></span> 
</nav> 

这里的getTemplate代码：

function getTemplate(templateUrl) 
    { 
     $.get('templates/' + templateUrl, function (content) 
     { 
      if (templateUrl === 'leftMenu.html') 
      { 
       $('#leftMenu').html(content); 
      } 
      else 
      { 
       $('#main').html(content); 
      } 
     }); 
    } 

即使它应该追加按钮s到#imgButtons跨度，看起来好像它不能选择刚加载的模板中的任何元素。如果我尝试将按钮附加到页面的另一部分（比如左边的菜单，它最近没有加载），或者不是获取模板，而是简单地清除主要的HTML中的附件。所以看来问题是如何选择已加载的元素。任何帮助将不胜感激。

感谢大家指出我正确的方向。最后，我没有使用Ajax，但deferred.done像这样：

$(document).on('click', "#subcategoryButtons button", function() { 
      var entryIndex = this.id[0]; 
      var subentryIndex; 
      if (this.id[1] === '0') { 
       subentryIndex = this.id.slice(-1); 
      } else { 
       subentryIndex = this.id.slice(-2); 
      } 
      var imgs = data.category[entryIndex].subcategory[subentryIndex].imgs; 
      $('main').html(''); 
      $.get("templates/imgMenu.html", function (content) 
      { 
       $('#main').html(content); 
      }).done(function() { 
       $.each(imgs, function (imgIndex) { 
        var imgName = data.category[entryIndex].subcategory[subentryIndex].imgs[imgIndex].imgName; 
        var imgId = data.category[entryIndex].subcategory[subentryIndex].imgs[imgIndex].imgId; 
       console.log(entryIndex); 
       $('#imgButtons span').append('<button id="' + imgId + '">' + imgName + '</button>'); 
       }); 
      }); 
     }); 
    } 
    ; 

Answer 1

您使用了错误的选择#imgButtons button应该#imgButtons span选择模板异步加载在#imgButtons

而且跨度所以你必须等到加载（通过回调函数）来操作它。像

$(document).on('click', "#subcategoryButtons button", function() { 
     getTemplate('imgMenu.html', callback); 
     function callback(){ 
      var entryIndex = this.id[0]; 
      var subentryIndex; 
      if (this.id[1] === '0') 
      { 
       subentryIndex = this.id.slice(-1); 
      } 
      else 
      { 
       subentryIndex = this.id.slice(-2); 
      } 
      var imgs = data.category[entryIndex].subcategory[subentryIndex].imgs; 
      $.each(imgs, function (imgIndex) 
      { 
       var imgName = data.category[entryIndex].subcategory[subentryIndex].imgs[imgIndex].imgName; 
       var imgId = data.category[entryIndex].subcategory[subentryIndex].imgs[imgIndex].imgId; 
       $('#imgButtons span').append('<button id="' + imgId + '">' + imgName + '</button>'); 
      }); 
     } 
    }); 
    ... 
function getTemplate(templateUrl, callback) 
{ 
    $.get('templates/' + templateUrl, function (content) 
    { 
     if (templateUrl === 'leftMenu.html') 
     { 
      $('#leftMenu').html(content); 
     } 
     else 
     { 
      $('#main').html(content); 
     } 
     callback(); 
    }); 
} 

Answer 2

，让我们对您的代码位修改，使用promises - 用AJAX方法返回的jqxhr对象实现了promise接口，因此你可以利用它。

function getTemplate(templateUrl) 
{ 
    return $.get('templates/' + templateUrl, function (content) 
    { 
     if (templateUrl === 'leftMenu.html') 
     { 
      $('#leftMenu').html(content); 
     } 
     else 
     { 
      $('#main').html(content); 
     } 
    }); 
} 

使用它以这种方式

$(document).on('click', "#subcategoryButtons button", function (e) { 
    getTemplate('imgMenu.html').then(function() { 
     var entryIndex = this.id[0]; 
     var subentryIndex; 
     if (this.id[1] === '0') { 
      subentryIndex = this.id.slice(-1); 
     } else { 
      subentryIndex = this.id.slice(-2); 
     } 
     var imgs = data.category[entryIndex].subcategory[subentryIndex].imgs; 
     $.each(imgs, function (imgIndex) { 
      var imgName = data.category[entryIndex].subcategory[subentryIndex].imgs[imgIndex].imgName; 
      var imgId = data.category[entryIndex].subcategory[subentryIndex].imgs[imgIndex].imgId; 
      $('#imgButtons span').append('<button id="' + imgId + '">' + imgName + '</button>'); 
     }); 
    }); 
});