選択要素の動作とスクリプトに影響を与える jQuery 1.10x の特定の変更について誰かが何らかの洞察を提供してくれることを願っていますか?
WP のネイティブ jQuery UI、タブ、ウィジェットなどを利用するように Wordpress プラグインを更新しているときに ( Google の AJAX Libraries API を介してエンキューするのではなく)、jQuery 1.10をjQuery 1.9x (またはそれ以下)を実行している動作と比較して。
私はこれにフィドルを入れていたでしょうが、jsfiddle は 1.9x より上の jQuery UI をまだサポートしていないため、1.10 の select 要素の動作で見られる種類の異常の 1 つの例として、以下を提供します...
[Click Me ] ボタンをクリックし、表示されるダイアログの [ Transaction Type ] ドロップダウンから [ Deposit ] を選択すると、次のデモが表示されます。
- show().change() 非表示の " .deposit_types " select 要素 -
- オプションは 1 つしかありません--すべきです
- .offset_select.changeイベントをトリガーして警告する
- " Offset Type = deposits_pending " および " Offset Label =Deposits Pending "
jQuery 1.9x 以下を使用すると、これは期待どおりに機能しますが、1.10
- 「.deposit_types」選択要素を、空の最初のオプションを持つものとして示しています。
- .offset_select.change イベントが失敗し、その後
アラート "オフセット タイプ = 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>