Question

我有一个Jsfiddle应用程序here。

当您访问小提琴并看到输出时，请执行以下操作：

单击“打开网格”链接，然后选择其中一个数字按钮。选择数字按钮后，您将看到下方显示字母按钮。
再次单击“打开网格”按钮并选择一个不同的数字按钮，您将意识到字母按钮已更改。这很好。
点击“添加问题”按钮，这会在顶部控件中添加一行显示您的选择。
现在这就是问题所在。在刚刚添加的行中，单击“打开网格”链接并选择一个不同的数字按钮，您现在应该在表格行中意识到字母按钮在他们想到时根本不会改变。这就是我遇到的问题。

现在它曾经在javascript代码中工作，代码是这样的：

var $tbody = $('#qandatbl > tbody'); 
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $options = $("<td class='option'></td>");
var $answer = $("<td class='answer'>");

但是，由于我希望表格行中的控件显示在一个和另一个上面，我在<tr>和$options中添加了一些$answer代码，以便代码现在看起来像这样：

var $tbody = $('#qandatbl > tbody'); 
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $options = $("<tr><td class='option'></td></tr>");
var $answer = $("<tr><td class='answer'></tr>");

所以我的问题是，为什么现在不更改表格行中的字母按钮，因为我添加了<tr>标签，如何修复？

同样，当添加表格行时，为什么它会显示两列而不只是一列？

Answer 1

<tr>中不能包含<tr>个元素。此外，您的HTML与其他标记混淆了。单击“添加问题”按钮时，我会得到类似的内容：

<tbody>
  <tr class="optionAndAnswer">
    <tr>
      <td class="option"></td>
      <input type="text" ....  />
      <span class="showGrid">[Open Grid]</span>
    </tr>
    <tr>
      <td class="answer"></td>
      <tr>
        <td>
          <input class="answerBtns" value="A" />
          <input class="answerBtns" value="B" />
          <input class="answerBtns" value="C" />
        </td>
      </tr>
    </tr>
  </tr>
</tbody>

这很混乱，需要清理。

我已经改变了你的小提琴，使其具有更好的HTML结构，并且仍然看起来像你想要的那样：http://jsfiddle.net/w2wJs/10/

Answer 2

将on函数更新为以下（更改选择器）并添加preventDefault：

 $('table').on('click','.showGrid', function(e) {
    e.preventDefault();
    $(".gridBtns").removeClass("gridBtnsOn");

    var value = $(this)
        .siblings('input[name=gridValues[]]').val();

    $("#btn" + value.replace(/\s/g, '')).addClass("gridBtnsOn");

    $('.optionTypeTbl').fadeToggle('slow');
    $(this).parent().append($('.optionTypeTbl'));
    $('.optionTypeTbl').css({

        left: $(this).position().left,
        top: $(this).position().top + 20

    });

    e.stopPropagation();

});

http://jsfiddle.net/w2wJs/9/

按钮怎么没变化？

2 个答案: