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

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

现在上面的一切都好了

问题是：

我遇到的问题是，用户可以添加一行，其中包含与上面的选项控件相同的模板。但在此选项和应答控件中，用户可以通过单击此模板中的一个网格按钮来更改选项类型。因此，我的问题是如何编写

.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); 

}

---

恐怕我一定是带来坏消息的人。您遇到的问题源于总体设计。您的HTML和javascript确实需要一个自下而上的彻底检查，目的是将所有javascript放入单个$（function（）{…}）结构中，从而进入相同的范围。要实现这一目标，您需要：

• 在javascript中附加所有事件处理程序，以支持HTML属性方法（目前为混合方法）
• 清除iFrame，以便通过AJAX获取以前的问题

在此过程中，您还将清除一些重复的点击处理（加上按钮img及其

…

包装）

然后，您可以开始找到问题的解决方案：

• 将与原始“选项和答案”块关联的所有事件处理委托给它和所有未来“选项和答案”块共用的容器。公共容器可以是

  文档

  ，但最好是更具体的。这似乎已经部分实现了
• 确保原始“Option and answer”块中的所有内部引用都使用类而不是ID

  .closest（）

  和

  .find（）

  在这里很有用
• 单击“+”按钮后，存储对“Option and answer”块的引用（例如，表示其容器的jQuery对象，相对而言）。最简单的方法是将此引用存储在

  $（function（）{…}）

  范围内的变量中。（现在你正从所有这些结构性变化中受益）。“添加”按钮的单击处理程序将使用此引用来影响正确的“选项和答案”块
• 在“添加问题”中，使用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();
    });
});

$（函数（）{
// **********
//数据区
// **********
var$$={//可重用的静态jQuery对象
“optionTypeTbl”：$（“#optionTypeTbl”），
‘o_和_a_proto’：$（“#proto”），
“o_和_a_extras”：$（“#extras”），
“模态”：$（“模态”）
},
$o_和_a_段=null；
// ******************
//效用函数
// ******************
功能微调（str）{
返回str.replace（/（^\s*）|（\s*$）/gi，“”//删除前导空格和尾随空格
.replace（/[]{2，}/gi，“”//用一个空格替换多个空格
.replace（//\n+/，“\n”）；//删除换行符后的空格
}
// ****************
//初步行动
// ****************
$$.modal.hide（）；
$（“input.gridBtns”）.removeClass（“gridBtnsOn”）；
$（“input.answerBtns”）.removeClass（“answerBtnsOn”）；
$$.optionTypeTbl.hide（）；
//以上代码确保所有按钮在关闭状态下启动（因此所有按钮均为白色）。
// **********************************************
//主窗口内元素的处理程序
// **********************************************
$（文档）。在（'单击'，函数（）上）{
$$.optionTypeTbl.fadeOut（'slow'）；
});
$（$input.gridBtns，$$.optionTypeTbl）.on（'click'，function（））{
var$this=$（this）；
var$container=$this.closest（'.optionandswer'）；
$container.find（“.gridBtns”）.removeClass（“gridBtnsOn”）；
$this.addClass（“gridBtnsOn”）；
$container.find（“.gridTxt”）.val（$this.val（））；
//$container.sides（'span[name=gridValues[]'）.val（$this.val（））；/？？？
$container.find（'.answerBtns'）。每个（函数（索引）{
if（索引<编号（$this.val（）））{
$（this.show（）；
}否则{
$（this.hide（）；
}
});
});
$$.o_和_a_proto.find（“.showGrid”）。on（'click'，函数（e）{
var$this=$（this）；
var$container=$this.closest（“.optionandswer”）；
$（“input.gridBtns”）.removeClass（“gridBtnsOn”）；
var值=$container.find（“.gridTxt”）.val（）；
//$（“#btn”+value.replace（/\s/g.））.addClass（“gridBtnsOn”）；/？？？
$$.optionTypeTbl.appendTo（$this.closest（“div.box”））.show（）.css({
左：$this.position（）.left，
顶部：$this.position（）。顶部+20
});
e、 停止传播（）；
});
$$.o_和_a_proto.find（“.plusimage”）。在（'click'，function（）{
$o_和_a_部分=$（此）；
$$.modal.modal（）；
});
$$.o_和_a_proto.find（“.answerBtns”）。在（'click'，function（）{
//b单击（此）；/？？？
});
$（“#addQuestionBtn”）。在（'click'，函数insertQuestion（）上{
$$.optionTypeTbl.hide（）.appendTo（文档）；//确保未克隆此巡回表
$$.o_和_a_extras.append（$$.o_和_a_proto.clone（true，true）.attr（'id'，''））.find（“span#plussignmsg”）.remove（）；
});
// ********************
     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>";

$(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();
    });
});