Question

以下是我的观点：

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

每个渲染块[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 %>

因此，每个表单都使用id“block_1”，“block_2”等等。

它创建如下形式：

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

我的观点是，当有人正在写文本区时，只要他点击textarea以外的其他地方，就会点击“保存”按钮。

我已经编写了一些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控制台时，每当我尝试点击其他地方而不是textarea时，我会收到以下消息：

未捕获RangeError：超出最大调用堆栈大小

有人可以告诉我它来自何处以及如何解决它？我对css位置不是很方便。

谢谢。

Answer 1

当您在form#block_1.edit_block input上触发“点击”事件时，其行为与您实际点击该元素时的行为相同，触发其自身点击事件及其父项之一，其中包括{{1} }。你的脚本进入无限循环：

body

因此“超出了最大调用堆栈大小”。

关于如何解决它：你究竟想做什么？如果用户点击textarea中的任何地方，你想要触发一些功能吗？

更新1

我不确定您的代码在做什么，但您可以通过停止事件的传播来避免无限循环：

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

来源：http://api.jquery.com/trigger/

Answer 2

将其更改为

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

除一个区域外如何指定css位置？轨道

2 个答案:

更新1