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');である場合、2番目のコードからグリッドボタンを選択できるようにするためのトリガーコードは何ですか?

アップデート：

このアプリケーションの URL をここに作成しました。手順に従ってアプリケーションを使用すると、何が起こっているかを確認できます。

  • ステップ 1: アプリケーションを開くと、ページに緑色のプラス ボタンが表示されます。それをクリックすると、モーダル ウィンドウが表示されます。
  • ステップ 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」と表示されます。これが、ユーザーが追加された行の 1 つにオプション タイプを追加したときのトリガー クリック機能の目的を知りたい理由です。これにより、回答ボタンがオプション タイプに一致するように変更されます。
4

3 に答える 3

1

の値が<span>次のaのクリックをトリガーする場合は、次のように実行できます。<input type="text" class="gridTxtRow maxRow">VAL

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

セレクターは、要素の次の兄弟である要素をA + B選択します。BA

更新：これを機能させる前に修正する必要があることがいくつかあります。

  1. 要素IDは一意であると想定されます。つまり、ページ全体で特定のIDを持つ要素は1つだけです。新しいオプションのを生成すると、最初のオプションのボタンとしてinput.gridBtnsID（、、btn3など）が使用されます。btn4ブラウザでこれを行うことができますが、これらのIDを使用するJavaScriptは予測できなくなります。

  2. 新しいオプションの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');
于 2012-07-11T17:37:36.480 に答える
0

jQuery onを使用して、コンテナー内のイベントを処理できます。
属性でボタンにタグを付けることができます。
たとえば、セレクターの role="gridBtn"と
データ
チェックアウトの rel です

于 2012-07-11T08:52:08.213 に答える
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 に答える