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 回答