0

我在下面有一行代码，当单击网格按钮时成功触发。这是下面的：

$('#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');，那么触发器代码应该是什么，第二个代码才能从第二个代码中选择网格按钮？

更新：

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

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

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

  • 第 4 步：单击“添加问题”按钮，它会在下方添加一行，其中包含选项的详细信息和顶部的答案控件。
  • 第5步：在您刚刚添加的行中，您会在左侧看到一个绿色加号按钮，单击此按钮并在搜索框中执行相同的搜索“AAA”。
  • 第 6 步：这次通过单击“添加”按钮选择最后一行，该行的“选项类型”为“AG”，因此应显示“答案”按钮 A、B、C、D、E、F 和G，但它没有这样做，它仍然显示“A，B，C，D”。这就是为什么我想知道当用户在添加的行之一中添加选项类型时触发单击功能的用途，因此它会更改答案按钮以匹配选项类型。
4

3 回答 3

1

如果您想触发对<span>an<input type="text" class="gridTxtRow maxRow">后面的值为 的a 的点击VAL，您可以执行以下操作：

$('input.gridTxtRow[value="VAL"] + span').trigger('click');

选择器A + B选择任何B元素的下一个兄弟A元素。

更新：在使它起作用之前，您需要解决一些问题：

  1. 元素 ID 应该是唯一的，即整个页面中只有一个具有特定 ID 的元素。当您input.gridBtns为新选项生成 时，它具有 ID（btn3、btn4等）作为第一个选项的按钮。浏览器会让你这样做，但使用这些 ID 的 JavaScript 将变得不可预测。

  2. input.gridBtnsfor a new 选项仅在用户单击时生成[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');
于 2012-07-11T17:37:36.480 回答
0

要将事件侦听器添加到页面上动态添加的元素，您可以使用 $(element).live("event", callback);

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

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

<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;
});
于 2012-07-10T21:56:19.770 回答
0

jQuery on可用于处理容器中的事件。
你可以通过一个属性来标记你的按钮，
例如选择器的role="gridBtn"
和数据
检查这个jsfiddle的rel

于 2012-07-11T08:52:08.213 回答