Chosen not working on elements from AJAX call

问题

I have a form which populates div elements based on selections from a select box using an AJAX call.

The content of the populated div is a multiselect box that I want Chosen to apply to. Unfortunately it seems that the 'chzn-select' is not firing, no doubt due to this being pulled in dynamically.

I have added this:

    <script type="text/javascript">
    $(".chzn-select").chosen();
    </script>

To the bottom of the code that is pulled in by AJAX, but it is still not firing. Any ideas on how to make this work as desired?

回答1:

Solved myself. Will post for future reference. I put the Chosen calls in their own function on my original page that calls the AJAX:

    <script type="text/javascript">
    function doChosen() {
        $(".chzn-select").chosen();
        $(".chzn-select-deselect").chosen({allow_single_deselect:true});
    }
    </script>

And in the AJAX script itself, I added a call to the function after the responseText part:

    document.getElementById(div).innerHTML=oXmlHttp.responseText
    doChosen();

回答2:

instead of using chosen(), try change() method. It works on change event. try:

$(".chzn-select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                // do your coding here
              });

        })
        .trigger('change');

来源：https://stackoverflow.com/questions/13746889/chosen-not-working-on-elements-from-ajax-call