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 . Change Select value using jQuery Uniform.js

2 . jquery cloning a block of element. select element acting weired

3. select not working after .clone

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

Answer 1

看来，jQuery mobile并不能识别克隆的selectmenu。

您可以做的是删除选择菜单并重新添加HTML select，然后使用selectmenu()

进行初始化

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

请参见修改后的JSFiddle

更新

我刚跟着jquery cloning a block of element. select element acting weired找到@ malko＆＃39; s answer，这比删除和重新插入要优雅得多。这将它减少到

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

请参阅JSFiddle

Answer 2

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

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

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

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

查看此工作FIDDLE

Answer 3

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

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（）重新初始化选择框。

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

4 个答案: