jQuery UI MultiSelect Widget搜索过滤器在jQuery对话框中没有获得焦点,

Tim*_*ger 2 jquery jquery-ui-dialog

我在使用jQuery UI MultiSelect小部件搜索过滤器时遇到问题,该过滤器在jQuery对话框中没有获得焦点.通过在浏览器中查看以下HTML页面,可以重现我遇到的问题:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style media="screen" title="currentStyle" type="text/css">
            @import "styles/jquery.multiselect.css";
            @import "styles/jquery.multiselect.filter.css";
            @import "styles/assets/prettify.css";
            @import "styles/jquery.ui.all.css";
            @import "styles/style.css";
        </style>
        <script src="scripts/jquery-2.0.0.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
        <script src="scripts/assets/prettify.js"></script>
        <script src="scripts/jquery.multiselect.js"></script>
        <script src="scripts/jquery.multiselect.filter.js"></script>
    </head>
    <body>
        <input id="create-package" type="button" value="Open Dialog" />
        <div id="package-dialog-form" title="Create new package">
            <p class="validateTips">All form fields are required.</p>
            <form>
                <fieldset>
                    <select multiple="multiple" style="width:370px">
                        <option value="red">Red</option>
                        <option value="green">Green</option>
                        <option value="blue">Blue</option>
                        <option value="orange">Orange</option>
                        <option value="purple">Purple</option>
                        <option value="yellow">Yellow</option>
                        <option value="brown">Brown</option>
                        <option value="black">Black</option>
                    </select>
                </fieldset>
            </form>
        </div>

        <script type="text/javascript">
            $(document).ready(function() {
                $("select").multiselect().multiselectfilter();

                $( "#package-dialog-form" ).dialog({
                    autoOpen: false,
                    height: 360,
                    width: 740,
                    modal: true,
                    buttons: {
                        "Create": function() {
                            var bValid = true;
                            allFields.removeClass( "ui-state-error" );
                        },
                        Cancel: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });

                $( "#create-package" ).button().click(function() {
                    $( "#package-dialog-form" ).dialog( "open" );
                });
            });
        </script>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

任何人都可以帮我解决这个问题吗?这是我的问题http://jsfiddle.net/tim_kruger/7ubdE/的分叉jqfiddle .

Nic*_*ela 7

简单地说这句话:

if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) {
            var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction;
            $.ui.dialog.prototype._allowInteraction = function(e) {
                if ($(e.target).closest('.ui-multiselect-filter input').length) return true;
                return ui_dialog_interaction.apply(this, arguments);
            }; 
        }
Run Code Online (Sandbox Code Playgroud)

在你之后

$(element).dialog("open");
Run Code Online (Sandbox Code Playgroud)

(或者在创建对话框后,如果使用autoOpen:true).

经测试:

  • Jquery UI v1.10.1
  • MultiSelect UI Widget 1.13
  • MultiSelect UI Widget过滤插件1.5pre