附加新元素后，Jquery主题不适用

Question

我在附加元素之后遇到问题它没有jquery主题。我尝试手动应用主题，但仍然无法使用输入框和选择框。有没有办法解决这个或如何编写如何追加元素的代码是错误的方式。删除按钮的代码也没有工作

这是我的javascript代码： -

＆＃13;

＆＃13;

 $(window).on('pageinit', function() {
 $(document).ready(function(){
    $("#Sadd").click(function() {
	var tDiv = $('#GPA1');
    var i = $('#GPA1 h1').size() + 1;
	$('<li class="ui-li-static ui-body-inherit" style="border:none"><h1>Module ' + i +':</h1></li><li class="ui-field-contain ui-li-static ui-body-inherit" data-role="fieldcontain" style="border:none"><label for="Sc' + i +'">Credits:</label><input type="number" step="0.01" id="Sc' + i +'" name="Sc' + i +'" data-clear-btn="true"></li><li class="ui-field-contain ui-li-static ui-body-inherit ui-last-child" data-role="fieldcontain" style="border:none"><label for="Sgrade' + i +'" class="select">Grade:</label><select class="Sgrade' + i +'" data-theme="f" id="Sgrade' + i +'"><option value="-1">—</option><option value="4">A</option><option value="3.7">A-</option><option value="3.3">B+</option><option value="3">B</option><option value="2.7">B-</option><option value="2.3">C+</option><option value="2">C</option><option value="1.7">C-</option><option value="1.3">D+</option><option value="1">D</option><option value="0">F</option></select></li>').appendTo(tDiv);
	 i++;
     return false;
	 });
 $("#Sremove").click(function() {
	 var i = $("#GPA1 h1").length();
                if( i > 5 ) {
                        $(this).parents('h1').remove();
                        i--;
                }
                return false;
				
				
  });			
  });
});

＆＃13;

＆＃13;

＆＃13;

这是我添加新元素时发生的事情的图片： -

这里是我的html和javascript的演示，只需单击“添加”按钮，您将看到结果

http://jsfiddle.net/tny5mh2n/

Answer 1

div标签存在问题，你没有添加div标签 即使我已经更新http://jsfiddle.net/tny5mh2n/2/

，也要尝试替换

$('<li class="ui-li-static ui-body-inherit" style="border:none"><h1>Module ' + i +':</h1></li><li class="ui-field-contain ui-li-static ui-body-inherit" data-role="fieldcontain" style="border:none"><label for="Sc' + i +'">Credits:</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear"><input type="number" step="0.01" id="Sc' + i +'" name="Sc' + i +'" data-clear-btn="true"><a href="#" class="ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all ui-input-clear-hidden" title="Clear text">Clear text</a></div></li><li class="ui-field-contain ui-li-static ui-body-inherit ui-last-child" data-role="fieldcontain" style="border:none"><label for="Sgrade' + i +'" class="select">Grade:</label><div class="ui-select"><div class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-btn-f ui-corner-all ui-shadow" id="Sgrade5-button"><span class="Sgrade5">—</span><select class="Sgrade' + i +'" data-theme="f" id="Sgrade' + i +'"><option value="-1">—</option><option value="4">A</option><option value="3.7">A-</option><option value="3.3">B+</option><option value="3">B</option><option value="2.7">B-</option><option value="2.3">C+</option><option value="2">C</option><option value="1.7">C-</option><option value="1.3">D+</option><option value="1">D</option><option value="0">F</option></select></div></div></li>').appendTo(tDiv);

Answer 2

我无法看到html。但我之前遇到了同样的问题。首先你应该使用$ .on而不是$ .click.and其次，当你动态添加元素时，你应该让父母的子动态元素。在动态创建它们之后，你无法通过他们的类或id直接获取它们