0

動的テキストボックスを使用しています。誰かがクリックすると"Add Option"、テキストボックスが動的に追加されます。テキストボックスをクリックすると"Remove"、動的に削除されます。すべてのコードはすべてのブラウザで正常に動作していますが、"Remove"機能は IE 7 では動作していません

この問題に関して私を助けてください

これはJavaScriptコードです

function addFormField()
{
  var optionId = $("#optionId").val();
  $("#pollOption").append("<p id='row" + optionId + "'><label for='txt" + optionId + "'>Option : <input type='text' size='20' name='option_"+optionId+"' id='option_"+optionId+"' name='option_"+optionId+"' class='text_field pollOption' validate='required:true'  \/> <a href='#' onclick='removeFormField(\"#row" + optionId + "\"); return false;'>Remove<\/a><\/br><\/p>");
  optionId = (parseInt(optionId) + 2) - 1;
  $("#optionId").val(optionId);
}

function removeFormField(optionId)
{
  $(optionId).remove();
  optionId = (parseInt(optionId) + 1) - 2;
}
$.validator.setDefaults(
{
  errorClass:"fontColorRed",
  submitHandler: function()
  {
    setPoll();
    return false;
  }
});

HTMLコード

<div class="pollContent">
        <div class="pollQuestionLable">
          Your poll Question </div>
        <div class="pollQuestionText">
          <input type="text" id="pollQuestion" class="text_field" name="pollQuestion" />
          <br/><a href="javascript:addFormField();">Add Options</a>
        </div>
        <div class="clearBoth"></div>
        <div class="pollQuestionLable">
          Poll Option
        </div>
        <div class="pollQuestionText">
          <div id="pollOption">
            <input type="hidden" id="optionId" value="3" />
            <p id='row1'>Option : <input type="text" id="option_1" name="option_1" class="text_field pollOption" validate='required:true' /></p>
            <p id='row2'>Option : <input type="text" id="option_2" name="option_2" class="text_field pollOption" validate='required:true' /></p>
          </div>
          <span id="ii" style="float:right">
            &nbsp;&nbsp;<input type="image" src="{$GLOBLE_PATH_REL}/images/share_bt.gif" />
          </span>
          <div class="wallPostToIcon4" id="wallPostToIcon4">
            <span class="sharingLockLeft" id="share" ><img src="{$GLOBLE_PATH_REL}/images/lock13.jpeg" border="0" alt="Share1" title="Share" /></span>
            <span class="sharingLockRight">&#9660;</span>
          </div>
          <div class="wallPostToPoll" id="wallPostToPoll">
            <ul>
              <li id="wallEveryOnePoll" value="1">Everyone</li>
              <li id="wallAllFriendsPoll" value="2">Friends of Friends</li>
              <li id="wallOnlyFriendsPoll" value="3">Friends Only</li>
              <li id="wallCustomizePoll" value="4">Customize</li>
             </ul>
          </div>
        </div>
        <div class="clearBoth"></div>
      </div>
4

2 に答える 2

1

よくわかりませんが、あなたの問題は、追加した無効な html コードが原因である可能性があります#pollOption。<label>私はあなたが開いて閉じない要素を指します。そして、おそらく私が見なかった他のいくつかのこと。

ここでの根本的な問題は、私がそれらを見ていないということです。コードが読みにくく、さまざまな種類のエラーが発生しやすいため、それらは表示されません。（あなたの質問のコメントセクションでも明らかですが、人々は「ああ、それを逃しました..」と言います）。

意地悪に聞こえたくないのですが、あなたのコードはにおいがします。(これは攻撃的ではありません:リンク)。

window.optionId = 2;

window.addFormField = function() {
    optionId += 1;
    var thisOption = $('<p>', {
        'id': 'row' + optionId
    }).append(
        $('<label>').attr({
            'for': 'txt' + optionId
        }).html('Option : '), 
        $('<input>').attr({
            'type': 'text',
            'size': 20,
            'name': 'option_' + optionId,
            'class': 'text_field pollOption',
            'validate': 'required:true'
        }), 
        $('<a>').attr({
            'href': '#'
        }).html('Remove').click(function() {
            thisOption.remove();
        })
    ).appendTo('#pollOption');
};

$.validator.setDefaults(
{
  errorClass:"fontColorRed",
  submitHandler: function()
  {
    setPoll();
    return false;
  }
});

addFormField私はあなたの機能をリファクタリングしました：

  • jQuery に要素を構築させます。このようにして、無効なマークアップが生成または使用されることはありません。
  • remove 関数を埋め込んだので、削除したい要素を (DOM で検索しなくても) 直接参照できます。
  • optionIdは、Number(解析なしで) 単純にインクリメントできる変数になりました。

このリファクタリングされたコードは、カプセル化の問題 (どこにでもあるグローバル変数!) などの理由で、確かに臭いが残っていますが、より読みやすく、少し堅牢になっていると思います。

于 2012-12-12T10:58:21.240 に答える
0

私はあなたのコードのいくつかの部分を理解していませんでした。ただし、IEで要素を削除する際に問題が発生した場合は、これを試してみることをお勧めします。

説明はそれがうまくいったと言います。

また、そのdivのinnerHTMLを ""（空の文字列）に設定するオプションは常にあります。私はそれが良くないことを知っています、しかし試すことができる最後のこと。

于 2012-12-12T09:10:12.480 に答える