我在下面有一个表格，其中包含一个文本框，并且在文本框旁边它包含一个称为“Open Grid”的超链接。如果用户单击此链接，则会打开一个网格，并在此网格上显示 3 到 26 的数字按钮。
<table id="optionAndAnswer" class="optionAndAnswer">
<tr class="option">
<td>1. Option Type:</td>
<td>
<div class="box">
<input type="text" name="gridValues" class="gridTxt maxRow" id="mainGridTxt" readonly="readonly" />
<span href="#" class="showGrid" id="showGridId">[Open Grid]</span>
</div>
<table class="optionTypeTbl">
<tr>
<tr><td><input type="button" value="3" id="btn3" name="btn3Name" class="gridBtns gridBtnsOff">
<input type="button" value="4" id="btn4" name="btn4Name" class="gridBtns gridBtnsOff">
<input type="button" value="5" id="btn5" name="btn5Name" class="gridBtns gridBtnsOff">
<input type="button" value="6" id="btn6" name="btn6Name" class="gridBtns gridBtnsOff">
//...goes all the way to btn26
</tr>
</table>
</td>
</tr>
</table>
现在，下面的代码能够触发其中一个网格按钮来声明单击了一个网格按钮。这段代码如下：
$('#btn'+gridValues).trigger('click');
现在上面的一切都很好。
问题：
我遇到的问题是用户可以添加一行，其中包含与顶部选项控件相同的模板。但在此选项和答案控件中，用户可以根据需要通过单击此模板中的一个网格按钮来更改选项类型。所以我的问题是我如何编写.trigger()正确指向此模板中的网格按钮？如果您查看上面的代码，它使用按钮的 id，但如果您查看下面的模板代码，它不包含 id，它只是将选项和控制功能从上面复制到模板中。
下面是模板：
function insertQuestion(form) {
var context = $('#optionAndAnswer');
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $options = $("<div class='option'>Option Type:<br/></div>");
var $questionType = '';
$('.gridTxt', context).each( function() {
var $this = $(this);
var $optionsText = $("<input type='text' class='gridTxtRow maxRow' readonly='readonly' />")
.attr('name',$this.attr('name')+"[]")
.attr('value',$this.val())
.appendTo( $options )
.after("<span href='#' class='showGrid'>[Open Grid]</span>");
$questionType = $this.val();
});
$td.append($options);
$tbody.append($tr);
}
更新：
我在这里为这个应用程序创建了一个 URL 。请按照步骤使用该应用程序，然后您可以看到发生了什么：
- 步骤 1：当您打开应用程序时，您会在页面上看到一个绿色的加号按钮，单击它会显示一个模态窗口。
- 第2步：在模态窗口有一个搜索栏，输入“AAA”并提交搜索，你会看到一堆行出现。
- 第 3 步：在第一行中，您会在“选项类型”AD 下看到，单击该行中的“添加”按钮，模式窗口将关闭，您会在右侧的灰色文本框中看到“选项类型”文本框等于 4 并显示答案按钮 A、B、C 和 D，这是因为您记得该行的选项类型是“AD”。
现在这工作正常，但它只适用于顶部选项和答案控制，请按照以下步骤操作：
- 第 4 步：单击“添加问题”按钮，它会在下方添加一行，其中包含选项的详细信息和顶部的答案控件。
- 第5步：在您刚刚添加的行中，您会在左侧看到一个绿色的加号按钮，单击此按钮并在搜索框中执行相同的搜索“AAA”。
- 第 6 步：这次通过单击“添加”按钮选择最后一行，该行的“选项类型”为“AG”，因此应显示“答案”按钮 A、B、C、D、E、F 和G，但它没有这样做，它仍然显示“A，B，C，D”。
那么如何在附加行之一中更改选项和答案控件中显示的答案按钮？
您在应用程序的视图源中看到的addwindow()功能是单击“添加”按钮后发生的功能。“添加”按钮位于包含的 PHP 脚本中，该按钮的代码如下所示，其中包含您在模式窗口中执行搜索后看到的所有列：
echo "<table border='1' id='resulttbl'>
<tr>
<th class='questionth'>Question</th>
<th class='optiontypeth'>Option Type</th>
<th class='noofanswersth'>Number of <br/> Answers</th>
<th class='answerth'>Answer</th>
<th class='noofrepliesth'>Number of <br/> Replies</th>
<th class='noofmarksth'>Number of <br/> Marks</th>
</tr>";
foreach ($searchResults as $key=>$question) {
echo '<tr class="questiontd"><td>'.htmlspecialchars($question).'</td>';
echo '<td class="optiontypetd">'.htmlspecialchars($searchOption[$key]).'</td>';
echo '<td class="noofanswerstd">'.htmlspecialchars($searchNoofAnswers[$key]).'</td>';
echo '<td class="answertd">'.htmlspecialchars($searchAnswer[$key]).'</td>';
echo '<td class="noofrepliestd">'.htmlspecialchars($searchReply[$key]).'</td>';
echo '<td class="noofmarkstd">'.htmlspecialchars($searchMarks[$key]).'</td>';
echo "<td class='addtd'><button type='button' class='add' onclick=\"parent.addwindow('$question','$searchMarks[$key]','$searchNoofAnswers[$key]','$searchOption[$key]','$searchReply[$key]','$searchAnswer[$key]');\">Add</button></td></tr>";
}
echo "</table>";