如何将点击事件绑定到文档，以便 JQuT "seen" AJAX 加载的 HTML？

Question

我有一个按钮列表，可以通过ajax加载不同的url。进入页面的特定部分。

我有一个函数，它从点击事件中获取数据属性，并将其传递给另一个做一些逻辑的函数。

我遇到的问题是通过ajax加载的新html被js看不见，它也有过滤功能。我在这里读了一些关于事件绑定的文章，但我不能完全理解我的例子中的synax。我不知道该如何把"绑"在一起；。每个"；用这种类型的答案(如下(。

Jquery"on"事件处理程序：事件委派和传递自定义数据

我正在寻找编写以下代码的正确方法，以便当通过.get请求加载html时；看到"；html。

var filterThemeBtn = $('.js-discoveries__theme-filter');
var counter = 0;
function getDataValueTheme() {
      filterThemeBtn.each(function () {
      var $this = $(this);
      $this.on( "click", {param1: $(this).attr('data-filter')},theme_url);
   });             
}
function theme_url(e){
   // if click event
   if (e) {
      selectedTheme = e.data.param1;
      selectedThemeUrl = "/discoveries/ajax/type/" + selectedTheme + "/" + counter + "/" + "16";
      // other logic ect
      $.get(selectedThemeUrl, function(data, status) {
         grid.append(data);
      })
}

Answer 1

谢谢，在尝试了一些事情之后，我只是同意不分离这两个函数，并使用各种帖子和WsMemon回复中描述的方法。我真的不想这样做，因为它看起来"；凌乱的"-不过它是有效的。感谢

   // gets data from theme click event loads relevant url via get 
   function theme_url(){
      $("body").on("click", ".js-discoveries__theme-filter", function(){
      var param1 = this.getAttribute('data-filter');
      selectedTheme = param1;
      alert(selectedTheme);
      selectedThemeUrl = "/discoveries-foula/ajax/type/" + selectedTheme + "/" + counter + "/" + "16";
      // remove items from grid
      $(".js-item").remove();
     // add items to grid based on category or "all"
     themeLogic();
     // when buttons in card are clicked add checked value to releveant top button
     addChecked();
     // load more recognising selected category
     $(loadMoreButton).off('click').on('click', function(){
          counter++
          selectedThemeUrl = "/discoveries-foula/ajax/type/" + selectedTheme + "/" + counter + "/" + "16";
          allItemsUrl = "/discoveries-foula/ajax/category/all/" + counter + "/" + "16";
          themeLogic();                        
       });                        
   });
}