jquery-mobile - jqueryモバイルボタンの更新と複数のバインディング

Question

Jquery Mobile に問題があります。JS から追加したボタンが正しく表示されず、CSS が不足しています。一方、ボタンを押すとその関数が呼び出されますが、別のボタンをクリックすると、オンオフタップのため問題が発生します。「addExerciseButton」には CSS がなく、問題は addExerciseButton 内で発生します

    <div data-role="page" id="addprogram">
        <div data-role="header" data-position="fixed">
            <h1>Add Program</h1>
            <a href="#" data-rel="back" data-theme="a">Back</a>
            <a href="#" data-theme="a">Save</a>
        </div><!-- /header -->
        <div data-role="content" class='addprogramcontent'>
            <div data-role="fieldcontain" class='addprogramlist'>
            </div>
        </div>
    </div><!-- /page -->

JS:

$(document).off("tap").on('tap', '.addExerciseButton', function(event){
  //alert(1);
  var container = $(this).attr('id');
  alert(container);
});

JS ページ:

eArray.sort();
var container = $("#addprogram").find(".addprogramlist");
container.empty();
// alert(eArray);
for(var i = 1; i <=7; i++)
{
  var day = getDay(i);
  container.append("<label for='day-" + i + "' class='select'>" + day + "</label>");
  var select = $("<select name='day-" + i + "' id='day-" + i + "'></select>");
      for (var j = 0; j < eArray.length; j++)
      {
        select.append("<option value='" + eArray[j] + "'>" +  eArray[j] + "</option>");
      }
      container.append(select);
      var addExerciseButton = "<input type='button' value='Add Exercise' class='addExerciseButton' data-role='button' data-theme='b' id='day-" + i + "'/>"
      container.append(addExerciseButton);

}
  $("select").selectmenu();

 $("#day-1").change(function() {

  // alert(value);
   $("#day-1 option:selected").each(function () {
            // alert(1);
            var value = $(this).val();
            $(this).parent().selectmenu('disable');
            alert(value);
          });
});
});

Answer 1

em を dom に追加した後、ボタンを更新する必要があります。

作業例: http://jsfiddle.net/PG2bV/55/

コード

$(":button").button();

Answer 2

使用する

container.trigger('create');

ボタンに CSS を使用しないで問題を解決しました。