グーグルで何度も試みて読んだ後、ここで私は解決できませんでしたが、「サイズ変更」イベントの後に問題が発生します。
手伝って頂けますか ？
<!DOCTYPE HTML>
<html>
<head>
<title>wb2</title>
<script type="text/javascript" src="../jquery/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery/jquery-ui.css"/>
<style>
.parent
{
position:relative;
background-color: rgba(255,255,255,0.5); /* transparent 50% */
width:120px;
height:30px;
text-align: center;
border-color : blue;
/* transparent 50% */
border-style:solid
}
.child
{
position:absolute;
left:5px;
top:5px;
background-color:lightgray;
width:100px;
height:20px;
border-color :lightgray;
border-width:1px;
border-style:solid
}
</style>
</head>
<body>
<div id="container" style="width:300px;height:300px;background-color:yellow">
<div id='lp' class='parent' >
<label id='lf' class='child'>label</label>
</div>
<div id='bp' class='parent' >
<button id='bf' class='child'>button</button>
</div>
<div id='sp'class='parent' >
<select id='sf' class='child'>select</select>
</div>
</div>
</body>
<script>
widget = {}
$('.parent').click(function(e)
{
widget = e.target ;
$('.parent').each(function(i, obj)
{
$(obj).draggable( 'disable' )
$(obj).resizable( 'disable' );
$(obj).css({ "border-width":"0px"} );
});
$(widget).draggable( 'enable' )
$(widget).resizable( 'enable' );
$(widget).css({ "border-width":"1px"} );
});
$( window ).resize(function()
{
var border=10 ;
if ( widget !== undefined )
{
ep = widget
epid = $(ep).attr('id' )
ec = ep.children[0]
ecid = $(ec).attr('id' )
w = parseInt ( $(ep).css ( 'width' ) );
h = parseInt ( $(ep).css ( 'height') );
if ( w-border< 0 ) w=border;
if ( h-border < 0 ) h=5;
$(ec).css ( 'width' , w-border )
$(ec).css ( 'height' , h-border )
}
});
$('.parent').each(function(i, obj)
{
$(obj).resizable();
$(obj).draggable();
$(obj).resizable( 'disable' );
$(obj).draggable( 'disable' ) ;
$(obj).css({ "border-width":"0px"} );
});
</script>
</html>
同様の質問（スタックオーバーフロー）：
私のテストに基づいて、私が使用して助言thisや$(this)対e.targetあなたのコードインチ コードを最適化するためにできることもいくつかあります。すべてのパーツが機能しましwidgetたが、clickイベントが終了するまでまだデータが入力されていません。JSFiddleの例：https：//jsfiddle.net/ghv46m0s/3/
JQUERY
$(function() {
widget = {};
$('.parent').click(function(e) {
$('.parent').each(function(k, v) {
$(v)
.resizable('disable')
.draggable('disable')
.css({
"border-width": "0px"
});
});
$(this).draggable('enable')
.resizable('enable')
.css({
"border-width": "1px"
});
widget = $(this);
});
$(window).resize(function(e) {
var border = 10;
console.log("Doing resize of window.");
if (widget !== undefined) {
ep = widget;
epid = $(ep).attr('id');
console.log(ep);
ec = ep.children[0];
ecid = $(ec).attr('id');
w = parseInt($(ep).css('width'));
h = parseInt($(ep).css('height'));
if (w - border < 0) w = border;
if (h - border < 0) h = 5;
$(ec).css('width', w - border);
$(ec).css('height', h - border);
}
});
$('.parent').each(function() {
$(this)
.resizable()
.draggable()
.css({
"border-width": "0px"
});
$(this)
.resizable('disable')
.draggable('disable');
});
});
上のclickI合格$(this)へwidget。ときにresizeイベントが発生し、エラーは生成されません。
要素のclickイベントをチェックするためのカウンターを作成することをお勧めします.parent。例を参照してください：https：//jsfiddle.net/ghv46m0s/2/ユーザーがブラウザーのサイズを変更した場合、これはresizeイベントとしてカウントされ、問題の一部である可能性があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加