Question

我有一行代码，当单击一个网格按钮时，它会成功触发。这是新的：

$('#btn'+gridValues).trigger('click');

触发器使用以下代码：

     <table id="optionAndAnswer" class="optionAndAnswer">
    <tr>
          <th colspan="2">
            Option and Answer
        </th>
    </tr>
    <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>

    <?php
        $num = range("3","26");
    ?>

          <table class="optionTypeTbl">
            <tr>

                <?php
                $i = 1;
                foreach($num as $key => $val){
   if($i%7 == 1) echo"<tr><td>";
   echo"<input type=\"button\" value=\"$val\" id=\"btn".$val."\" name=\"btn".$val."Name\" class=\"gridBtns gridBtnsOff\">";        
                    if($i%7 == 0) echo"</td></tr>";
                    $i++;
                }
                ?>

                    </tr> 
                    </table>
    </td>
    </tr>
    </table>

触发器代码的作用是让用户点击网格按钮（btn）4，然后它将显示4个答案按钮A，B，C，D。另一个例子是如果用户点击网格按钮7，它将显示7个答案按钮A，B，C，D，E，F，G。

但我在下面有另一段代码，它就像你在上面的代码中看到的选项控件的模板或副本。

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

        }

我的问题是，如果在第一个代码中触发器是$('#btn'+gridValues).trigger('click');，那么触发器代码应该是什么，第二个代码能够从第二个代码中选择网格按钮？

更新：

我为此应用创建了一个网址here。请按照步骤使用该应用程序，然后您可以看到发生了什么：

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

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

第4步：点击“添加问题”按钮，它会在下方添加一行包含选项和答案控件的详细信息。
第5步：在你刚刚添加的行中，你会看到一个geen plus 左侧的按钮，单击此按钮并执行相同的操作在搜索框中搜索“AAA”。
第6步：这次选择最后一行，点击“添加” 按钮，此行的“选项类型”为“A-G”，因此应显示 “答案”按钮A，B，C，D，E，F和G，但它不会这样做，它仍然是陈述“A，B，C，D”。这就是为什么我想知道触发器点击的原因函数用于当用户在其中一个中添加选项类型时添加了行，因此它更改了答案按钮以匹配该选项类型。

Answer 1

如果您想点击价值为<span>的{{1}}后的<input type="text" class="gridTxtRow maxRow">点击，您可以执行以下操作：

VAL

选择器$('input.gridTxtRow[value="VAL"] + span').trigger('click');选择A + B元素B的任何A元素。

更新：在开始使用之前，您需要修复一些事项：

元素ID应该是唯一的，即整个页面中只有一个元素具有特定的ID。为新选项生成input.gridBtns时，它会将ID（btn3，btn4等）作为第一个选项的按钮。浏览器允许您这样做，但使用这些ID的JavaScript将变得不可预测。
新用户的input.gridBtns仅在用户点击[Open Grid]时生成。如果用户在点击[Open Grid]之前单击绿色加号按钮，则没有按钮可以打开.trigger()。我建议您在添加新选项时添加这些按钮。

完成这些修复后，如果更改此行：

$(plusbutton_clicked).closest('tr').find('input.gridTxtRow').val(gridValues);

到此：

$(plusbutton_clicked).closest('tr')
    .find('input.gridTxtRow').val(gridValues).end()
    .find('input.gridBtns[value="' + gridValues + '"]').trigger('click');

它应该做你想要的。

更新＃2 抱歉，我认为您在[Open Grid]之后添加了新按钮，实际上您正在移动<table class="optionTypeTbl">。

代替以前的$(plusbutton_clicked)...代码，试试这个：

$(plusbutton_clicked).closest('tr')
    .find('input.gridTxtRow').val(gridValues)
        .parent().append($('.optionTypeTbl'));

$('#btn' + gridValues).trigger('click');

Answer 2

要在页面上动态添加元素添加事件侦听器，您可以使用$（element）.live（“event”，callback）;

这可能不是您想要做的，但我会做以下事情：

模板中的我的按钮（由php for循环添加[VALUE]）：

<a href="#" class="btn" rel="[VALUE]">[VALUE] options</a>

我的听众：

$(".btn").live("click", function(){
    var numberOfAnswers = $(this).attr('rel');

    // Code to show answers taken from the rel tag on the <a>

    return false;
});

Answer 3

jQuery on可用于处理容器中的事件您可以通过属性标记按钮例如role =“gridBtn”代表选择器和rel用于数据
结帐jsfiddle

如何在下面的示例中触发事件

3 个答案: