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>

每个渲染块 [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 中写作时，只要他点击 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 控制台时，每次我尝试点击文本区域以外的其他地方时，我都会收到以下消息：

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

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

谢谢你。

4

2 回答 2

0

当您触发其上的“点击”事件时，form#block_1.edit_block input其行为与您实际点击该元素时的行为相同，触发其自己的点击事件以及其父级事件之一，其中包括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 回答
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 回答