-1

これについて何時間もウェブを検索してきましたが、説明や解決策が見つかりませんでした。誰かが私に提供できるかどうか見てみましょう...

私が抱えている問題は、「無効な」古い HTML がいくつかあり、現在、JQuery を介して他の div などを挿入して Web サイトを改良していることです。しかし、DOM を変更した後、一部の機能が機能しなくなりました。

例を挙げましょう。古い HTML は次のようなものです。

<table>
   <form method="POST">
   <tr>
      <td><input type="text" value="test" /></td>
   </tr>
   <tr>
      <td><input type="submit" value="SEND!" /></td>
   </tr>
   </form>
</table>

ご覧のとおり、実際には無効な<form>の外側にネストされたがあります。<tr>しかし、ブラウザによって正しく解釈され、機能しています。しかし、 JQueryを介して DOM を操作すると、ブラウザ (私の場合は Firefox) が間違っていることに気づき、ボタンが機能しなくなります。Firebug をチェックすると、次のようになります。

<table>
   <form method="POST"></form>
   <tr>
      <td>...

したがって、タグsubmitが「自動的に」閉じられ、ボタンが埋め込まれなくなったため、明らかにボタンは機能しなくなりました。<form>submit

誰でもこの問題に光を当てることができますか? なぜこれが起こっているのか、またこれを防ぐために何ができるでしょうか (元の HTML を変更する以外に)。

どうもありがとう ！！

編集：

「無効なマークアップ」という答えだけを得るのを避けるために、2 番目の例を示します。

<input type="text" id="something" value="" />

onLoad で読み込まれている Javascript 関数:

function setRequired() {
   document.getElementById('something').setAttribute('aria-required', 'true');
}

オンロード後、Firebug でこれを確認でき、期待どおりに動作します。

<input type="text" id="something" value="" aria-required="true" />

しかし、その後に DOM 操作を追加すると、次のようになります。

<inputaria-required="true" type="text" value="" id="something"></inputaria-required="true">

EDIT2：

DOM の変更に関しては、ページの本文全体を<div>タグの構造内にラップしているだけです。したがって、（簡略化して）次のようになります。

$('body').wrapInner('<div class="container">');

この問題の動作を確認するには、このページを確認してください(IE で動作するため、必ず Firefox で表示してください)。

4

3 に答える 3

1

これは、jQuery ではなくブラウザによって行われています。それを止める唯一の方法は、HTML コードを有効にすることです。<table>中に入れる<form>

于 2013-01-10T10:48:56.213 に答える
0

後で追加したコードはかなり混乱しています。適切に機能するには、非常に正確なタイミングが必要だと思います。

// Bind a page load event handler
$(document).ready(function() {
    LoadStyle();
});

// Manipulate page with raw HTML 1/2 seconds after page load
function LoadStyle() {
    setTimeout(function () {
    var outerbody = "<div>";
    var outerbodyEnd = "<\/div>";
    var frameHtml = $('body').html();
        var frameHtml = $('body').html();
        document.body.innerHTML = outerbody + frameHtml + outerbodyEnd;
    }, 500);
}

// Override previous onload handlers
window.onload = setRequired;

// Manipulate page with DOM methods right after page load
function setRequired() {
    var field;
    field = document.getElementsByName('required_one')[0];
    setAttrNS(field, "aria-required", "true");
}

いずれにしても、遅延を 5000 ミリ秒に増やすとsetTimeout()、無効なノードが によって生成されることがわかりますLoadStyle()。さらに調査した結果、まだ問題が発生しているこの短いスニペットを作成しました (jQuery は関係ありません)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Test wrapping the content</title>
        <script type="text/javascript" language="javascript">
            window.onload = function(){
                var field = document.getElementsByName('required_one')[0];
                field.setAttributeNS("http://www.w3.org/2005/07/aaa", "aria-required", true);
                alert(document.getElementsByTagName("body")[0].innerHTML);
            };
        </script>
    </head>
    <body>
        <input type="text" name="required_one" value="This should show">
    </body>
</html>

によって無効な HTML が生成されました.innerHTML。Firebug の HTML パネルも alert() も名前空間属性を表示しません。悲しいことに、私は名前空間に詳しくないので、コード、Firebug、または Firefox の何が問題なのかはわかりません。

于 2013-01-10T13:22:13.057 に答える
0

これは無効なマークアップです。マークアップを変更できない場合は、マークアップを修正するか、Jquery .submit() を使用することをお勧めします。

于 2013-01-10T10:54:12.840 に答える