0

希望有人能提供一些关于 jQuery 1.10x 中影响选择元素行为和脚本的具体变化的见解？

在更新 Wordpress 插件以利用 WP 的本机 jQuery UI、选项卡、小部件等（而不是通过 Google 的 AJAX 库 API 排队）时，我在运行jQuery 1.10时遇到了各种意外选择元素行为（和失败）的困难与运行jQuery 1.9x（或更少）的行为相比。

我已经为此提出了一个小提琴，但由于 jsfiddle 尚不支持 1.9x 以上的 jQuery UI，我提供以下内容作为我在 1.10 中看到的围绕选择元素行为的异常类型的一个示例......

单击“单击我”按钮，然后从结果对话框中的“交易类型”下拉菜单中选择“存款”，以下演示应：

  1. show().change() 隐藏的“ .deposit_types ”选择元素——
  2. 只有一个选项——应该
  3. 触发.offset_select.change事件来提醒
  4. “偏移类型 = deposit_pending ” 和 “偏移标签 =Deposits Pending ”

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

  1. 将“.deposit_types”选择元素显示为具有空的第一个选项
  2. 导致 .offset_select.change 事件失败，然后

  3. 警报“偏移类型 = null\n偏移标签 ='' ”

    <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>

4

0 回答 0