Question

I have a line of code below which successfully does a trigger when a grid button is clicked. This is belw:

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

The trigger works with this code below:

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

What the trigger code does is lets say the user clicks on the grid button (btn) 4, then it will display 4 answer buttons A,B,C,D. Another example is if the user clicks on grid button 7, it will display 7 answer buttons A,B,C,D,E,F,G.

But I have another piece of code below where it is like a template or a copy of the option control you see in the above code.

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

        }

My question is that if in the first code the trigger is $('#btn'+gridValues).trigger('click');, then what should the trigger code be for the second code to be able to select the grid button from the second code?

UPDATE:

I have created a url for this application here. Please follow the steps to use the application and then you can see what is happening:

• Step 1: When you open applicaton, you see a green plus button on the
  page, click on it and it will display a modal window.
• Step 2: In modal window there is a search bar, type in “AAA” and
  submit search, you will see a bunch of rows appear.
• Step 3: In the first row, you see under “Option Type” A-D, click on
  the “Add” button within this row, the modal window will close and you
  see in the grey textbox on right hand side that “Option Type” textbox
  equals 4 and it displays the Answer buttons A,B,C and D, this is
  because as you remember the option tpye for that row was “A-D”.

Now this works fine but it only works for the top option and answer control, follow the steps below:

• Step 4: Click on the “Add Question” button, it adds a row underneath
  containing the details from the option and answer control on top.
• Step 5: Within the row you have just added, you see a geen plus
  button on left hand side, click on this button and perform the same
  search “AAA” in search box.
• Step 6: This time select the last row by clicking on its “Add”
  button, the “Option Type” for this row is “A-G” so it should display
  “Answer” buttons A,B,C,D,E,F and G, but it doesn’t do this, it still
  states “A,B,C,D”. This is why I want to know what the trigger click
  function is for when the user adds an option type within one of the
  added rows, so it changes the answer buttons to match the option
  type.

Answer 1

If you want to trigger a click on a <span> that follows an <input type="text" class="gridTxtRow maxRow"> with a value of VAL, you can do this:

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

The selector A + B selects any B element that is the next sibling of an A element.

---

Update: There are some things you need to fix before getting this to work:

1. Element IDs are suppose to be unique, i.e. there is only one element with a particular ID in the whole page. When you generate the input.gridBtns for a new option, it has IDs (btn3, btn4, etc.) as the buttons for the first option. Browsers will let you do this, but JavaScript that uses those IDs will become unpredictable.

2. The input.gridBtns for a new option are only generated when the user clicks [Open Grid]. If the user clicks on the green plus button before clicking [Open Grid], then there are no buttons to call .trigger() on. I suggest when you add a new option, you add those buttons as well.

After these fixes, if you change this line:

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

to this:

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

it should do what you’re looking for.

---

Update #2: Sorry, I thought you were adding new buttons after [Open Grid] when in fact you’re moving <table class="optionTypeTbl"> around.

Instead of the previous $(plusbutton_clicked)... code, try this:

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

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