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

Question

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

这是我的 javascript 代码：-

 $(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;
				
				
  });			
  });
});

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

这是我的 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 获取它们