Question

希望有人可以对jQuery 1.10x中影响的具体更改提供一些见解选择元素行为和脚本？

更新Wordpress插件以利用WP的原生jQuery UI，标签，小部件等。（而不是通过Google的AJAX Libraries API进行排队）我遇到了困难与运行 jQuery 1.9x （或更少）的行为相比，运行 jQuery 1.10 时出现各种意外的选择元素行为（和失败）。

我已经为此做了一个小提琴，但由于jsfiddle还不支持1.9x以上的jQuery UI，我提供以下内容作为只有一个的异常情况的例子我是看看1.10 ...

中的选择元素行为

点击“ 点击我 ”按钮，然后从“<”中选择“ 存款 ” strong> 交易类型 “在结果对话框中下拉列表，以下演示应该：

show（）。change（）隐藏的“ .deposit_types ”选择元素 -
只有单一选项 -
触发 .offset_select.change 事件以提醒
“偏移类型= deposit_pending ”和“偏移标签=存款未决“

使用jQuery 1.9x或更低版本，这可以按预期工作，但是1.10

将“.deposit_types”选择元素显示为具有空的第一个选项
导致.offset_select.change事件失败，然后
提醒“偏移类型= null \ nOffset Label =''”

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet"-->

    <!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"-->
    <script>
        jQuery(function(){
            jQuery('body').on('click','.add_trans', function()
            {   /* INITIATE TRANSACTION / LOAD REGISTER */
                var btn = jQuery(this),
                    trans_list = btn.prop('name'),
                    reg_html = jQuery('#'+trans_list+'_register').html(),
                    reg_id = 'reg_'+trans_list,
                    register = jQuery('.reg_div').prop('id',reg_id).html(reg_html),
                    account = btn.prop('title'),
                    title = "Record a Transaction in the "+account+" Register",
                register.prop('title', title).dialog(
                {   modal: true,
                    width:600,
                    resizable: false,
                    position: [250, 150],
                    open: function() { reg_events(account); },
                    buttons:[ { text: "Ok", click: function() { flush_dlg(); } } ]
                });
            });
        });
        function reg_events(account)
        {   /*  INITIALIZE TRANSACTION REGISTER DIALOG EVENTS */
            var register = jQuery('.reg_div');
            register.on('change','.trans_type', function()
            {
                var trans_type = jQuery(this).val();
                register.find('.offset_sel').val('').hide();
                if(trans_type =='Deposit') register.find('.deposit_types').show().change();
            });
            register.on('change', '.offset_sel', function()
            {   /* ADD REGISTER OFFSET ACCOUNT TYPE SELECTS */
                var offset_sel = jQuery(this),
                    offset_type = offset_sel.val(),
                    offset_label = jQuery("option:selected", offset_sel).text();
                alert('Offset Type ='+offset_type+'\n Offset Label ='+offset_label);
            });
        }
        function flush_dlg()
        {   /*DESTROY DIALOG - REMOVE AND REPLACE ITS CONTAINER */
            var selector = ".reg_div",
                replace_me = "class='reg_div'";
            jQuery(selector).dialog( "destroy" );
            jQuery(selector).remove();
            jQuery('#main_tabs').after("<div "+replace_me+"></div>");
        }
    </script>
    <style> .register{ display:none;} .reg_div, .ui-widget {font-size:smaller; } </style>
</head>
<body>
    <div id='main_tabs'>
        <div class='reg_div'></div>
        <!--TABS CONTENT HERE -- MAY INCLUDE VARIOUS 'add_trans' CLASS BUTTONS && 'register' CLASS DIVs -->
        <button class='add_trans' name='petty_cash' title='Petty Cash'> Click Me! </button>
        <div id="petty_cash_register" class="register">
            <select class="trans_type">
                <option value="">Transaction Type</option>
                <option value="Deposit">Deposit</option>
                <option value="Withdrawal">Withdrawal</option>
            </select>
            <select style="display: none;" class="offset_sel deposit_types split">
                <option value="deposits_pending">Deposits Pending</option>
            </select>
        </div>
    </div>
</body>

jQuery 1.10x的变化会影响“选择元素”行为和脚本吗？

0 个答案: