Question

我的页面触发了ajax查询，在该查询中查询MySQL Db并返回结果。（全部成功）。

这些结果的格式可以输出为购物廊/目录以及手风琴过滤器菜单。因此，我可以过滤购物目录显示。例如说我只想看红色的物品。

到目前为止一切正常。

我的问题是过滤器手风琴菜单-在js中动态创建。
当我单击选项卡内容中的任何可选项目时，什么也没有发生。这意味着应该发送的参数没有发送。

如果我对手风琴过滤器进行硬编码或什至用我的服务器端语言将其直接加载到html中，过滤器都会发送该参数，因此购物目录会相应调整，但是在这种情况下，我无法动态更改过滤器菜单。

我认为我将在下面发布的代码是可以识别原始加载内容中的更改并触发ajax的相关代码，但是（我认为）它不理解动态加载内容中文本框的任何更改。

请帮助我了解我需要添加的内容，这将使动态加载的内容释放到ajax调用中。

var $checkboxes = $("input:checkbox");

function update_nav_filter(opts) {

  $.ajax({
    type: "POST",
    url: "/php-queries/product-filter-query.php",

    dataType: 'json',
    cache: false,
    data: {
      filterOpts: opts
    },
    success: function(records) {
      //console.log(records);
      //alert('SUCCESS!');
      // alert(records);
      $('#filters_div').html(makeFilter(records));

    }
  });
}

$checkboxes.on("change", function() {
  //alert('there is a change is checkbox status');  // working on page load but not when any checkbox is clicked-on 
  var opts = getCatalogueFilterOptions();
  updateCatalogue(opts);
  update_nav_filter(opts);
});

$checkboxes.trigger("change");

任何帮助都将不胜感激。

Answer 1

我创建了一个事件监听器。

在页面加载之后，我在JS生成的导航过滤器中选择了一个项目。例如，sub_category部分中的“ pedal_bins”。然后，我看到了关于pedal_bins的显示。：）

然后，我选择“水壶”，另一个子类别，但是我只能看到单击的最后一个子类别。踏板箱消失了。

如何最好地通过单击来构建和删除项目？存储在会话参数中，然后一种。如果最新点击与会话中的内容匹配，则将其删除 b。如果会话中还没有最新点击，请添加

然后提交那个阶段的数组是什么？

或者，有没有更好的方法来运行它？

这里是听众

enter code here

document.getElementById("filtering_div").addEventListener("click",function(e) {
// e.target was the clicked element
if (e.target && e.target.matches("input")) {
    var parameter = e.target.id;
    //console.log("Anchor element", parameter , " was clicked" ); 

    var opts = getCatalogueFilterOptions(parameter);
    console.log(opts);
    // update_nav_filter(opts);
    updateCatalogue(opts);
    }
});

Answer 2

您遇到“委托”问题。创建动态元素时，为了能够对新创建的元素起作用，必须将其引用为最初随DOM一起加载的子元素。

例如，如果您有一个名为<div id="top"></div>的元素并创建了一个动态元素，比如说<button id="test">Click</button>，则在添加事件侦听器时必须引用该div。 / p>

$("#top").on('click', '#test', function(){
   //event related code goes here.
});

Here is a fiddle我创建了一些示例来解释整个过程。

如果对此有任何疑问，请告诉我。

动态加载的JS需要像HTML中一样可以点击

2 个答案: