我在jQuery mobile中克隆一个表单,克隆的表单元素似乎不起作用. IE选择列表不会更改值,您无法滑动范围滑块.
我正在尝试使用以下代码克隆表单并在克隆表单的每个实例上增加名称和id值.
function newObservation() {
var len = $('.observation').length;
var titleLen = $('.observation').length + 2;
var $html = $('.observationTemplate').clone();
$('.observationTitle:eq(0)').text("Observation - " + titleLen);
$html.find('[name=audit-observation-category]').eq(0).attr({name:"audit-observation-category" + len,id:"audit-observation-category" + len});
$html.find('[name=audit-observation-notes]').eq(0).attr({name:"audit-observation-notes" + len,id:"audit-observation-notes" + len});
$html.find('[name=audit-observation-recommendation]').eq(0).attr({name:"audit-observation-recommendation" + len,id:"audit-observation-recommendation" + len});
$html.find('[name=audit-observation-severity]').eq(0).attr({name:"audit-observation-severity" + len,id:"audit-observation-severity" + len});
$html.find('[name=audit-observation-person]').eq(0).attr({name:"audit-observation-person" + len,id:"audit-observation-person" + len});
$html.find('[name=audit-observation-date]').eq(0).attr({name:"audit-observation-date" + len,id:"audit-observation-date" + len});
return $html.html();
}
$(document).on('pageinit',function(){
$('<div/>',{
'class' : 'observation',html:newObservation()
}).appendTo('#auditContainer');
$('#auditObservationButton').click(function() {
$('<div/>',{
'class':'observation',html:newObservation()
}).hide().appendTo('#auditContainer').slideDown('slow');
});
$('#auditForm').on('click','.close',function(){
$(this).parent().fadeOut();
});
});
这是一个小提琴,它概述了代码,但是由于库本身中的jQM错误而无法工作(或者说是jsfiddle)http://jsfiddle.net/FL398/
以下是我遇到http://dirtybirddesignlab.com/FireSafe/audit.html#auditForm的示例,如果单击“添加观察”表单克隆,正确递增元素的名称和id属性,但它们是可访问的.
解决方法
如果您使用Firebug,我建议安装
Firequery附加组件,它将显示由jQuery(和jQuery Mobile)在DOM元素上创建的所有对象.
您将看到克隆表单中的所有JQM窗口小部件都没有设置对象,这意味着虽然UI看起来正确,但元素不会增强,因此它们将无法工作.
在JQM 1.4中,您只需调用$(your_form).enhanceWithin()即可让JQM呈现克隆表单中的所有元素.在JQM 1.3.2中,这是不可用的,所以我猜你必须使用trigger(“create”)来初始化东西.
另一点：
看起来你正在预先增强标记(=做JQM工作).问题在于你的元素看起来不错,但没有“JQM处理”就行不通.这就是为什么1.4增强选项被添加到第一个小部件,这意味着你可以在源代码中设置data-enhanced =“true”,而JQM只会创建对象(“功能”)而不是修改UI.再次针对1.3.2,这是不可用的.它可以被黑客攻击,但需要维护很多工作,所以如果你预先增强并坚持它,我宁愿使用1.4.否则试着打电话
$(document).find("form").trigger("create")
看看我的意思:-)
最后提示：
我在W3C validator中运行了你的页面.仍然存在一些问题,包括一些重复的id,这些也会在某些浏览器上破坏你的页面(拼写IE).
