更改偵聽器不適用於JQuery Mobile中動態添加的內容

Question

試圖將動態形式組合在一起，但收效甚微。 使用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");
}

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”。 看一下這個帖子。

更改偵聽器不適用於JQuery Mobile中動態添加的內容

問題描述

3 個解決方案

解決方案1
0 2014-02-10 08:27:50

解決方案2
0 2014-02-10 08:27:57

解決方案3
0 已采納 2014-02-10 08:30:05

更改偵聽器不適用於JQuery Mobile中動態添加的內容

問題描述

3 個解決方案

解決方案1 0 2014-02-10 08:27:50

解決方案2 0 2014-02-10 08:27:57

解決方案3 0 已采納 2014-02-10 08:30:05

解決方案1
0 2014-02-10 08:27:50

解決方案2
0 2014-02-10 08:27:57

解決方案3
0 已采納 2014-02-10 08:30:05