jQuery AJAX 调用后选择的插件更新问题

jQuery Chosen plugin update issue after AJAX call

我的 plugin not applying to a control that is rebuilt by an 通话有问题。我查看了其他建议,但似乎没有找到可行的答案。

我正在使用 3.2.1 and 1.8.2

我的page is built in 第一次输出时一切正常 例如:

<div id="leveldiv">
  <p>
    <label for="fk_level">Level</label>
    <select name="fk_level" class="chosen-select" id="fk_level" title="Level"><option value="0" selected = "selected">None</option>
    </select>
  </p>
</div>

<script type="text/javascript">
  $(".chosen-select").chosen({
    width: "200px"
  });
</script>

在运行时,fk_level select 控件使用最初绘制控件的 call which calls the same 函数重建。但是 chosen 功能丢失了,它只是呈现为标准 select 框。

在替换包含 div innerHTML 之后,我已经调用了 select 控件的 .trigger("liszt:updated") 方法 nd.trigger("chosen:updated") 但这并没有好像有什么作用。

AJAX控制码:

function buildLevel() {
  exID = window.document.forms[0].fk_examtype.value;
  sID = window.document.forms[0].fk_subject.value;

  str = "?action=1&exID=" + exID + "&sID=" + sID

  xmlhttp = getHTTPObject();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("leveldiv").innerHTML = this.responseText;
      $("#fk_level").trigger("liszt:updated");
      $("#fk_level").trigger("chosen:updated");
    }
  };
  xmlhttp.open("GET", "ajax.php" + str, true);
  xmlhttp.send();
}

为了完整起见,调用的示例输出是:

<p>
  <label for="fk_level">Level</label>
  <select name="fk_level" id="fk_level" class="chosen-select" title="Level">
    <option value="0">None</option>
  </select>
</p>

几天来我一直在摆弄这个问题,但就是无法在 调用后将所选插件应用于控件。我已经在 Firefox Developer Edition 中对此进行了调试,它没有抛出 错误。

如有任何帮助,我们将不胜感激。

马克.

$("#fk_level").trigger("chosen:updated"); 在 select 框未被破坏且值已更改的情况下有效。如果 select 盒子被销毁并重新创建,您需要为新的 select 盒子重新激活插件。 因此,在您的 AJAX 控制代码中,替换

$("#fk_level").trigger("liszt:updated");
$("#fk_level").trigger("chosen:updated");

$("#fk_level").chosen({
    width: "200px"
});

我遇到了同样的问题,我使用了下面的示例示例并且与我一起工作得很好

$.ajax(
type: 'POST',
url: 'ApiUrl',
dataType: 'json',
async :false,
    success: function(resultList) {
        for (var item in resultList) {
            if (resultList.hasOwnProperty(item)) {
                $("#selectId").append("<option value=" +
                    resultList[item].value +
                    " id=" +
                    resultList[item].value +
                    ">" +
                    resultList[item].text +
                    "</option>");
            }


        }
        $("#selectId").trigger("liszt:updated");
        $("#selectId").trigger("chosen:updated");
    }
});