如果动态添加，jQuery 选择不起作用

Question

我正在通过 javascript 动态添加新行，并选择了 jQuery 下拉列表和文本框。文本框很好，但是，连续新添加的下拉菜单不起作用（甚至不可点击）。如果我使用简单的 html 下拉菜单，它会正常工作。 请帮忙...

HTML

<table id="POITable" border="1" width="100%">
<select data-placeholder="Select Product" id="productsList" class="chosen-select" style="width:200px;" tabindex="2" onchange="getProductName();">
            <option value=""></option>
            <option value="Test1">Test 1</option>
            <option value="Test2">Test 2</option>
            </select>
                </td>
           <td><input size=25 type="text" id="latbox"/></td>
        <td><input size=25 type="text" id="lngbox" /></td>
        <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>
        <td><input type="button" id="addmorePOIbutton" value="Add" onclick="insRow()"/></td>
        </tr>
 </table>

Javascript

function insRow()
{
    var x=document.getElementById('POITable');
    var new_row = x.rows[1].cloneNode(true);
    var len = x.rows.length;
    new_row.cells[0].innerHTML = len;

    var inp1 = new_row.cells[1].getElementsByTagName('select')[0];
    inp1.id += len;
    inp1.value = '';
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';
    var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
    inp3.id += len;
    inp3.value = '';

    x.appendChild( new_row );
}

Answer 1

您是否尝试过触发“chosen:updated”事件：

$('#productsList').trigger("chosen:updated");

将新选项添加​​到选择之后？

稍后编辑：如果您使用的是旧版本的 selected，则该事件可能称为“liszt:updated”

Answer 2

这是一个 CSS 问题，只需在脚本中添加这段代码 sn-p

$(".chosen-container").css("min-width","220px");