Question

我有过产品类型的过滤器，它是按照数据库中的enteries通过ajax创建的：

HTML部分：

<ul id="foodtype"></ul>

显示过滤器的Ajax代码：

    function showtypes(){
        $.ajax({
          type: "POST",
          url: "ajax/incl/showtype",
          data:'',
          dataType : 'json',
          cache: false,
          success: function(records1){
                $('#foodtype').html(makefoodType(records1));
          }
        });
       }

       function makefoodType(data1){
          var tbl_body = "";
            $.each(data1, function() {
              var tbl_row = "",
                  currRecord = this;
              $.each(this, function(k1 , v1) {
            tbl_row += "<li><input type=checkbox id="+v1+" name="+v1+" /> 
                        <span style=font-size:14px>"+v1+"</span></li>";
              })
              tbl_body += tbl_row;
            })

        return tbl_body;
      }

类别正在正确显示，但是当我选择复选框时，则需要执行以下代码

 function getFilterOptions(){
   var opts = [d,de];
   $checkboxes.each(function(){
     if(this.checked){
       opts.push(this.id);
   }
  return opts;
  }

  var $checkboxes = $("input:checkbox");
  $checkboxes.on("change", function(){
    var opts = getFilterOptions();
    updateProducts(opts);

  });

我希望将复选框的ID推送到具有php代码的页面。但检查复选框没有任何结果。注意：当我查看源代码时，<ul id="foodtype"></ul>代码保持不变。不显示<li>个元素：（

Answer 1

您需要使用称为事件委派的东西。聆听容器上的复选框上的点击事件。因此，在您动态添加它们之后，click事件将被冒泡到容器中。

Answer 2

那是因为var $checkboxes = $("input:checkbox");在ajax完成之前被执行，因此没有元素。

更改为

$(document).on("change", "input:checkbox", function() {
    var opts = getFilterOptions();
    updateProducts(opts);
});

它应该有用。

添加jQuery工作，但onclick不起作用

2 个答案: