在Jquery mobile中选择选项中的问题

Question

我有一个包含输入文本和选择选项和按钮的表。单击按钮时克隆表行。 除了select选项之外，每件事都运行正常。 克隆表行后，选择选项不显示我选择的内容。 这是JsFiddle http://jsfiddle.net/aravinth/Ad22d/

像Javascript代码一样

var b = 1;

function cloneRow() {

var row = document.getElementById("table");
var table = document.getElementById("particulars");

var clone = row.rows[1].cloneNode(true);
var clones = row.rows.length;

var workerName = clone.cells[0].getElementsByTagName('input')[0];
var position = clone.cells[2].getElementsByTagName('select')[0];
var date1 = clone.cells[3].getElementsByTagName('input')[0];
var fromHr = clone.cells[4].getElementsByTagName('input')[0];
var toHr = clone.cells[5].getElementsByTagName('input')[0];
var add = clone.cells[1].getElementsByTagName('input')[0];

workerName.id = "workerName" + b;
position.id = "position" + b;
date1.id = "date1" + b;
fromHr.id = "fromHr" + b;
toHr.id = "toHr" + b;
add.id = "add" + b;
$(date1).datebox();
table.appendChild(clone);
b++;

}

我也提到了这个

1。 使用jQuery Uniform.js更改选择值

2。 jquery克隆一块元素。 选择要素的元素

3.选择.clone之后不工作

但没有成功。 请提出一些解决方案。

Answer 1

看来，jQuery mobile无法识别克隆的selectmenu 。

你可以做的是删除selectmenu并重新添加HTML select然后用selectmenu()初始化它

$('.ui-select', clone).remove();
clone.cells[2].appendChild(position);
$(position).selectmenu();

见修改后的JSFiddle

更新：

我只是跟着jquery克隆了一块元素。 选择行动的元素并找到@ malko的答案 ，这比删除和重新插入要优雅得多。 这减少了

$(position).closest('.ui-select').replaceWith(position);
$(position).selectmenu();

见JSFiddle

Answer 2

我认为您通过使用此答案解决了选择选项问题。 还有一个问题，你需要解决你的小提琴。 问题是最后两列（fromHr和toHr）的时间选择器。

要解决此问题，您需要在javascript代码中添加波纹管线。

$(fromHr).datebox();
$(toHr).datebox();

因为这些行是动态创建的。 所以你需要添加上面的行来显示你的fromHr和toHr中的时间选择器。

看到这个有效的FIDDLE

Answer 3

问题是jQuery Mobile将很多元素（例如你的select）重新创建为非本机小部件，然后将函数绑定到某些事件。 当你只是克隆行时，你没有得到事件绑定，所以你需要做的是实际附加原始html - 重新渲染之前它是什么 - 然后触发create方法：

var template="<tr><td>..your row here..</td></tr>";
$("#particulars").append(template).parent().trigger('create');

我有一个勉强工作的小提琴，但我删除了很多你的代码，所以我可以很容易地说明我在说什么。 http://jsfiddle.net/Ad22d/81/

Answer 4

我有同样的问题并通过在克隆之前调用原始选择框上的selectmenu（“destroy”）来修复它，然后在附加克隆选择之后通过调用selectmenu（）重新初始化选择框。