Question

尝试将动态表单放在一起但收效甚微。使用JSON doc作为源，我填充了一个双层表单方案。

首先，添加一系列类别以制作带有与类别匹配的ID的复选框条目。然后将子类别添加到具有其父类别的类名的第二个div中。

我想听一下复选框事件来切换与父类别相关的子类别的视图。我可以使用动态生成的选择器来.hide（）输入复选框元素本身，但没有一个监听器正常工作。我没有得到任何警报，也没有触发任何事在这里不知所措，任何帮助表示赞赏。

HTML CODE：

<body>
      <div data-role="" class="" id="page1">
        <button class="ui-btn" onclick="selectTemplate();">Std Template</button> <br>
        <form>
        <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" class="checkbox" id="group1">
        </fieldset>        
        </form>
      </div>
      <div data-role="" class="" id="page2">
        <form>
        <div data-role="controlgroup">
        <fieldset data-role="controlgroup" class="checkbox" id="group2">
        </fieldset>        
        </div>
        </form>
      </div>

  </body>

JSON：

var tagTemplate = {
  family: {
    name: "family",
    description: "These are your family members.",
    items: [
      {
        name: "Joe"
      },
      {
        name: "Mary"
      },
      {
        name: "Marc"
      }
    ]
  },
  design: {
    name: "design",
    description: "Different types of design notes.",
    items: [
      {
        name: "inspiring"
      },
      {
        name: "fail"
      },
      {
        name: "wayfinding"
      },
      {
        name: "graphics"
      }
    ]
  },
  work: {
    name: "work",
    description: "Stuff for work.",
    items: [
      {
        name: "whiteboard"
      },
      {
        name: "meeting"
      },      
      {
        name: "TGIF"
      },
      {
        name: "event"
      }
    ]
  }
};

JS：

function addTemplateItems (template) {
  $("#group1").empty();
  $("#group2").empty();
  // $("#group2").hide();


  for (var a in template) {
    console.log(template[a].name);
    $("#group1").append('<label><input id="' + template[a].name + '" type="checkbox" />' 
      + template[a].name + '</label>');
      for (var b in template[a].items) {
        console.log(template[a].items[b].name);
        $("#group2").append('<label class="' + template[a].name + '""><input id="' + template[a].items[b].name + '" type="checkbox" />' 
        + template[a].items[b].name + '</label>');

        console.log('"' + '.' + template[a].name + '"');
      // hide initial sub-tag collection
      // $('"' + '.' + template[a].name + '"').hide();

    // $().hide();
      }

    $('label.family').hide();
      var inputSelectors = [];
      var name = 'family';
      var inputSelector = document.getElementById(template[a].name);
  // add listeners to show+hide sub-tags
    $(inputSelector).change(function(){
        alert('something changed.');       
        if ($(this).is(':checked')) {
            alert(template[a].name + ' checked');
            $('#' + template[a].name).show();
        } else {
            alert(template[a].name + ' checked');
            $('#' + template[a].name).hide();
        }
    });

// $(inputSelector).hide();

  }

  $("input[type='checkbox']").checkboxradio().checkboxradio("refresh");
  // $("[data-role=controlgroup]").controlgroup("refresh");
}

Answer 1

使用.delegate（）

// add listeners to show+hide sub-tags
    $(inputSelector).delegate('change', function(){
        alert('something changed.');       
        if ($(this).is(':checked')) {
            alert(template[a].name + ' checked');
            $('#' + template[a].name).show();
        } else {
            alert(template[a].name + ' checked');
            $('#' + template[a].name).hide();
        }
    });

或.on（）

// add listeners to show+hide sub-tags
        $(inputSelector).on('change', function(){
            alert('something changed.');       
            if ($(this).is(':checked')) {
                alert(template[a].name + ' checked');
                $('#' + template[a].name).show();
            } else {
                alert(template[a].name + ' checked');
                $('#' + template[a].name).hide();
            }
        });

Answer 2

您应该使用.live()进行尝试。这将使事件处理程序附加到动态添加的元素。这是它的文档：https://api.jquery.com/live/

根据其后继者重写.live（）方法很简单;这些是用于所有三种事件附件方法的等效调用的模板：

$( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+

Answer 3

使用复选框，建议您使用“onclick”而不是“onchange”。看看这个post。

更改侦听器不在JQuery Mobile中动态添加内容

3 个答案: