如何为模板编写.trigger（）代码？

Question

我有一个下面的表格，其中包含一个文本框，并在文本框旁边包含一个称为“开放网格”的超链接。如果用户点击该链接，它打开了一个网格，并在此网格它从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); 

} 

UPDATE：

我创建了一个URL这种应用here。请按照使用应用程序的步骤，然后你可以看到发生了什么：

• 第1步：当您打开应用程序时，你看到 页面上的绿色加号按钮，点击它，它会显示一个模态窗口。
• 第2步：在模态窗口中有一个搜索栏，输入“AAA”并提交搜索，你会看到一堆行出现。
• 步骤3：在第一行中，您看到“选项类型”AD下的 此行中的“添加”按钮，模式窗口将关闭，并且您在屏幕右侧的灰色文本框中看到“选项类型”文本框 等于4，它显示答案按钮A，B，C和D，这是 ，因为您记得该行的选项类型是“AD”。

现在这工作正常，但它仅适用于顶部的选项和答案控件，请按照下列步骤操作：

• 第4步：点击“添加问题”按钮，添加一行下方 包含选项和答案控制顶部的细节。
• 步骤5：在刚刚添加的行中，在左侧看到一个绿色加 按钮，单击此按钮并在搜索框中执行相同的搜索“AAA” 。
• 步骤6：这次通过点击“Add”按钮，选择最后一行，此行的“Option Type”为“AG”，所以它应该显示 “Answer”按钮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>"; 

Answer 1

恐怕我一定是坏消息的承担者。您所遇到的问题源于整体设计。您的HTML和JavaScript实际上需要进行自下而上的检修，目的是将所有JavaScript都放入一个$（function（）{...}）结构中，从而进入相同的范围。要达到此目的，您需要：

• 将javascript中的所有事件处理程序都附加到HTML属性方法（当前为混合方式）。
• 清除iFrame以支持通过AJAX获取以前的问题。

在这个过程中，您还将清除一些重复的点击处理（加上按钮img和它的<a>...</a>包装）。

然后，你就可以开始寻找解决问题的方法：

• 代表所有的事件处理与原“选项，并回答”块到一个容器，是共同的它和所有未来的“期权相关并回答“块”。普通容器可能是document，但最好是更具体的东西。这似乎已经部分实现了。
• 确保原始“选项和答案”块内的所有内部引用都可以使用类而不是ids。 .closest()和.find()在这里很有用。
• 单击“+”按钮时，存储对“选项和答案”块的引用（例如，表示其容器的jQuery对象，发现相对）。最简单的方法是将此引用存储在范围内的变量中。 （现在你正在从所有这些结构变化中受益）。 “添加”按钮的单击处理程序将使用此引用来影响正确的“选项和答案”块。
• 在“添加问题”上，使用jQuery的.clone(true, true)复制原始块（然后将克隆插入到DOM中）。如果已应用其他修复程序，则所有功能（点击处理程序）都将自动附加到克隆。

我工作的很快，但它仍然会允许1-2天。

下面是我将如何组织的JavaScript。

$(function() { 
    // ********** 
    // Data area 
    // ********** 
    var $$ = { // reusable static jQuery objects 
     'optionTypeTbl': $('#optionTypeTbl'), 
     'o_and_a_proto': $("#proto"), 
     'o_and_a_extras': $("#extras"), 
     'modal': $("#modal") 
    }, 
    $o_and_a_section = null; 

    // ****************** 
    // Utility functions 
    // ****************** 
    function trim(str) { 
     return str.replace(/(^\s*)|(\s*$)/gi, "") // removes leading and trailing spaces 
      .replace(/[ ]{2,}/gi," ") // replaces multiple spaces with one space 
      .replace(/\n +/,"\n"); // Removes spaces after newlines 
    } 

    // **************** 
    // Initial actions 
    // **************** 
    $$.modal.hide(); 
    $("input.gridBtns").removeClass("gridBtnsOn"); 
    $("input.answerBtns").removeClass("answerBtnsOn"); 
    $$.optionTypeTbl.hide(); 
    // code above makes sure all buttons start in the OFF state (so all button are white). 

    // ********************************************** 
    // Handlers for elements inside the main window 
    // ********************************************** 
    $(document).on('click', function() { 
     $$.optionTypeTbl.fadeOut('slow'); 
    }); 
    $("input.gridBtns", $$.optionTypeTbl).on('click', function() { 
     var $this = $(this); 
     var $container = $this.closest('.optionAndAnswer'); 
     $container.find(".gridBtns").removeClass("gridBtnsOn"); 
     $this.addClass("gridBtnsOn"); 
     $container.find(".gridTxt").val($this.val()); 
     //$container.siblings('span[name=gridValues[]]').val($this.val()); // ??? 
     $container.find('.answerBtns').each(function(index) { 
      if (index < Number($this.val())) { 
       $(this).show(); 
      } else { 
       $(this).hide(); 
      } 
     }); 
    }); 
    $$.o_and_a_proto.find(".showGrid").on('click', function(e) { 
     var $this = $(this); 
     var $container = $this.closest(".optionAndAnswer"); 
     $("input.gridBtns").removeClass("gridBtnsOn"); 
     var value = $container.find(".gridTxt").val(); 
     //$("#btn" + value.replace(/\s/g, '')).addClass("gridBtnsOn"); //??? 
     $$.optionTypeTbl.appendTo($this.closest("div.box")).show().css({ 
      left: $this.position().left, 
      top: $this.position().top + 20 
     }); 
     e.stopPropagation(); 
    }); 
    $$.o_and_a_proto.find(".plusimage").on('click', function() { 
     $o_and_a_section = $(this).closest(".optionAndAnswer"); 
     $$.modal.modal(); 
    }); 
    $$.o_and_a_proto.find(".answerBtns").on('click', function() { 
     //btnclick(this); // ??? 
    }); 
    $("#addQuestionBtn").on('click', function insertQuestion() { 
     $$.optionTypeTbl.hide().appendTo(document);//ensure this itinerant table is not cloned 
     $$.o_and_a_extras.append($$.o_and_a_proto.clone(true,true).attr('id','')).find("span#plussignmsg").remove(); 
    }); 

    // ********************************************** 
    // Handlers for elements inside the modal window 
    // ********************************************** 
    $$.modal.find("#close").on('click', function() { 
     $.modal.close(); 
     return false; 
    }); 
    $$.modal.find("form").on('submit', function() { 
     var form = $(this).get(0); 
     $.ajax({ 
      url: 'previousquestions.php', 
      data: { 
       'searchQuestion': 1, 
       'questioncontent': trim(form.questioncontent.value) 
      }, 
      type: "get", 
      success: function(html) { 
       $("#searchResults").html(html); 
      }, 
      error: function() { 
       alert("Something went wrong"); 
      } 
     }); 
     return false; 
    }); 

    $$.modal.find("#searchResults").on('click', 'button.add', function() { 
     var $container = $(this).closest("tr"); 
     var g = $container.find("optiontypetd").data('g'); 
     var btn = $container.find("answertd").text(); 
     $o_and_a_section.find("input.gridTxt").val(g); 
     if($o_and_a_section.closest("#detailsBlock").length) { //if is original Options and Answers section 
      //do something ??? 
      //$('#btn'+g).trigger('click'); //??? 
     } 
     $.modal.close(); 
    }); 
}); 

这在一定程度上有效，但请注意它需要对HTML和CSS进行相关更改。