选择的jquery在重新生成的内容上失败

Question

我<select>通过ajax 生成内容.第一次<option>通过ajax加载 - 一切都很好并且选择被正确触发,即使我已经预先加载了内容<select>.但如果我<option>第二次产生sa - 我无法选择开火.

这是一个jsfiddle,告诉你我的意思:https://jsfiddle.net/kneidels/vrp0gz1c/

第一次打GO - 一切都很好.但再次点击它,选择恢复到旧的非选择风格.

有人可以帮我"重置"插件,以便每次都能正确触发吗？

使用选择的版本:1.87

Answer 1

更改您的代码：

$("#trigger").click(function(){
    $("#myselect").show().html('<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>');
    $('#myselect_chosen').remove();
    $("#myselect").chosen({rtl: true, allow_single_deselect: true});    
})

到：

$("#trigger").click(function(){
    let $mySelect = $("#myselect");

  // Make sure previous instantiations have been cleaned-up.
    $mySelect.chosen("destroy");
    $mySelect.html('<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>');
    $mySelect.chosen({rtl: true, allow_single_deselect: true});
})

您可以在这里看到这一点，即随后按“Go”现在可以正确渲染所选组件。

您不需要调用 show() （它只显示元素），并且您的删除语句使实例化的所选对象无效。