更改侦听器不适用于 JQuery Mobile 中动态添加的内容答案

【问题标题】：Change listener not working on dynamically added content in JQuery Mobile更改侦听器不适用于 JQuery Mobile 中动态添加的内容
【发布时间】：2014-03-07 11:36:19
【问题描述】：

试图拼凑一个动态表格，但收效甚微。使用 JSON 文档作为源，我正在填充一个两层表单方案。

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

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

HTML 代码：

<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");
}

【问题讨论】：

标签： javascript jquery jquery-mobile dynamic jquery-selectors

【解决方案1】：

对于复选框，我们鼓励您使用“onclick”而不是“onchange”。看看这个post。

【讨论】：

尝试了所有方式的 jQuery 处理程序附件，但这个链接中概述的方法是我唯一可以工作的方法。谢谢

【解决方案2】：

将其与 .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();
        }
    });

OR 与 .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();
            }
        });

【讨论】：

delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); } --> 一样，delegate() 也被弃用了
.delegate() 在 jquery 版本
@mpsyp 你在 $(document).ready(); 中添加了 js 代码吗？ ?

【解决方案3】：

您应该尝试使用 .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+

【讨论】：

.live() 不再被 jquery 推荐。而是使用 .bind() 或 .delegate()
@Abhidev，从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。
不再推荐 .live() 的论点是什么？谢谢！