0

これが私の見解です：

<body >
  <table class="table canvas" cellspacing=0 >
    <tr class="twenty">
      <th colspan=2>KP</th>
      <th colspan=2>KA</th>
      <th colspan=2>VP</th>
      <th colspan=2>CR</th>
      <th colspan=2>CS</th>
    </tr>
    <tr class="twenty" >
      <td rowspan=3 colspan=2 >
        <%= render @blocks[0]  %>
        </td>
      <td colspan=2> 
        <%= render @blocks[1]  %>
      </td>
      <td rowspan=3 colspan=2>
        <%= render @blocks[2]  %>
      </td>
      <td colspan=2>
        <%= render @blocks[3]  %>
      </td>
      <td rowspan=3 colspan=2>
        <%= render @blocks[4]  %>
      </td>
    </tr>
    <tr class="twenty" >
      <th colspan=2>KR</th>
      <th colspan=2>CH</th>
    </tr>
    <tr class="twenty" >
      <td colspan=2>
        <%= render @blocks[5]  %>
      </td>
      <td colspan=2>
        <%= render @blocks[6]  %>
      </td>
    </tr>
    <tr class="fifty">
      <th colspan=5>C$</th>
      <th colspan=5>RS</th>
    </tr>
    <tr class="fifty" >
      <td colspan=5>
        <%= render @blocks[7]  %>
      </td>
      <td colspan=5>
        <%= render @blocks[8]  %>
      </td>
    </tr>
  </table>
</body>

各 render blocks[x] はこれをレンダリングします:

<%= form_for block, :html => { :id => "block_"+block.id_case.to_s}  do |f| %>
  <%= f.text_area :content, :size => "5x4"  %>
  <%= f.hidden_field :id_case %>
  <%= f.hidden_field :canvas_id %>
  <%= f.submit "Save" %>
<% end %>

したがって、各フォームは「block_1」、「block_2」などの ID をハッシュします。

次のようなフォームを作成します。

     <form accept-charset="UTF-8" action="/blocks/11" class="edit_block" id="block_1" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="Xztxw50P1m0GXd9yysJfZdvy+/6HRtd+RupVX09Qwt4=" /></div> 
  <textarea cols="5" id="block_content" name="block[content]" rows="4"> 
Development</textarea> 
  <input id="block_id_case" name="block[id_case]" type="hidden" value="1" /> 
  <input id="block_canvas_id" name="block[canvas_id]" type="hidden" value="1" /> 
  <input name="commit" type="submit" value="Save" /> 
</form>

私のポイントは、誰かが現在テキストエリアに書いているときに、テキストエリア以外の場所をクリックするとすぐに「保存」ボタンをクリックするということです。

テストするために、この小さなJavaScriptコードを書きました：

var test=false;

$('form#block_1.edit_block textarea#block_content').click(function() {
test=true;
}
)


$('body').on('click', 'td', function(){
   if (test)
    {
      $('form#block_1.edit_block input').trigger('click');
      test=false
    }

});

しかし、Chrome で JavaScript コンソールを開くと、テキストエリア以外の場所をクリックしようとするたびに、次のメッセージが表示されます。

キャッチされない RangeError: 最大呼び出しスタック サイズを超えました

誰かがそれがどこから来て、それを修正する方法を教えてくれますか? 私はCSSの場所があまり便利ではありません。

ありがとうございました。

4

2 に答える 2

0

に変更します

var test=false;
var alreadyInCallback = false;

$('form#block_1.edit_block textarea#block_content').click(function() {
test=true;
}
)


$('body').on('click', 'td', function(){
   if (test && !alreadyInCallback)
    {
      alreadyInCallback = true; 
      $('form#block_1.edit_block input').trigger('click');
      alreadyInCallback = false;
      test=false
    }
});
于 2013-08-12T20:35:25.230 に答える
0

「クリック」イベントをトリガーするform#block_1.edit_block inputと、実際にその要素をクリックしたときと同じように動作し、独自のクリック イベントと、 を含むその親の 1 つをトリガーしますbody。あなたのスクリプトは無限ループに入ります:

$('body').on('click'
...
$('form#block_1.edit_block input').trigger('click');
...
$('body').on('click'
...
$('form#block_1.edit_block input').trigger('click');
...

したがって、「最大コールスタックサイズを超えました」。

それを解決する方法について：正確に何をしようとしていますか？ユーザーがテキストエリア以外の場所をクリックした場合に、何らかの機能をトリガーしたいですか?

更新 1

コードが何をしているのかはわかりませんが、イベントの伝播を停止することで無限ループを回避できます。

$('form#block_1.edit_block input').on('click', function(e) {
  e.stopPropagation()
})

ソース: http://api.jquery.com/trigger/

于 2013-08-12T20:26:53.653 に答える