divで動作するjquery-uiタブ機能を取得する必要があります。div は他のいくつかの要素の中にあります。これは、リーフレット マップのポップアップ マーカーにバインドされた html です。
これが私が使用しているhtmlです。 次の図でわかるように、この html が機能することはわかっています。
これが問題の写真です。上部の div とポップアップの div の両方の html は同じです。
また、私のスクリプトは次のように呼び出されます。
$(window).load(function() {
$( ".detail-popup-info" ).tabs();
});
実際の DOM が呼び出される前に終了しているかどうかわからなかったので、そうしましたが、実際には役に立たなかったようです。この問題は、他の多くのプロパティを継承することに関係していると思いますか? css のプロパティを調べると、まったく異なって見えます。
私が推測しているトップ div は、html ページでハード定義したため、何も継承しません。ポップアップ内のもう 1 つの div は、文字列として関数に送信され、おそらくシャッフルされます。
壊れたもののcssプロパティは次のとおりです。
background-color: rgb(255, 255, 255);
cursor: auto;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
font-size: 12px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
height: 100px;
line-height: 16.8px;
text-align: left;
width: 200px;
-moz-font-feature-settings: normal;
-moz-font-language-override: normal;
作業中のcssプロパティは次のとおりです。
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 255, 255);
background-image: url("http://localhost:3001/stylesheets/images/ui-bg_flat_75_ffffff_40x100.png");
background-origin: padding-box;
background-position: 50% 50%;
background-repeat: repeat-x;
background-size: auto auto;
border-bottom-color: rgb(170, 170, 170);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: rgb(170, 170, 170);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(170, 170, 170);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(170, 170, 170);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
color: rgb(34, 34, 34);
font-family: Verdana,Arial,sans-serif;
font-size: 9.6px;
height: 100px;
padding-bottom: 1.91667px;
padding-left: 1.91667px;
padding-right: 1.91667px;
padding-top: 1.91667px;
position: relative;
width: 200px;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
それは奇妙な部分だと思います。機能しているものには、壊れたものよりも多くの css プロパティがあります。たぶん、jquery-uiはいくつかの追加のプロパティを適用して機能させますが、何らかの理由でそれらをポップアップ div に適用していませんか?
アップデート
したがって、jquery は実際にはポップアップ内の div を見つけられないことが判明したと思います。これは、ポップアップが開かれたり閉じられたりするたびに、それらが動的に追加されたり、DOM から削除されたりするためです。これは、ポップアップが開かれていない html の写真です。通常、それらleaflet-popup-paneは空である の下にあります。
たぶん、作業中の css プロパティをハードコピーして、ポップアップ div に手動で適用する必要があります。
更新 2
ポップアップhtmlがDOMに存在しないためであることを確認しました。jquery-ui tabs() 関数を実行しsetTimeoutてすぐに開くと、正しくスタイル設定されました。
しかし、一度閉じて再度開くと、また消えてしまいます。