Question

我有一个在页面加载时运行的绘图功能，这里是html.erb file摘录：

<div class="canvasarea">
<canvas id="myCanvas" width="360" height="840"></canvas>
</div>

<script> 
//definition of vars used in draw function...

 window.onload = function() {
    window.setTimeout(drawSomething,500)
  };

  function drawSomething() {
    context.drawImage(imageObj, xOffset, yOffset);
  }  
 </script>

我想在页面上按下按钮时重绘此图像。该按钮位于html.erb文件中。它目前取代了一些tr。我想在按下按钮时调用drawSomething()函数。 .js.erb file：

<% @pos_range.each do |p|%>
    $("td#add_foo_<%= p %>").replaceWith("<%= escape_javascript(render(:partial => 'bars/update_foo_position', :locals => { :id => @foo.id, :position_str => @position_str, :position => p} ))%>");
    <% if (@foo and p == @foo.position) or @pos_range.length == 1 %>
        $("td#add_foo_button_<%= p %>").replaceWith("<%= escape_javascript(render(:partial => 'bars/update_foo_position_button', :locals => { :id => @bar.id, :position_str => @position_str, :position => p} ))%>");
    <% else %>
        $("td#add_foo_button_<%= p %>").replaceWith("<%= escape_javascript(render(:partial => 'bars/update_foo_position_empty', :locals => { :id => @bar.id, :position_str => @position_str, :position => p} ))%>");
    <% end %>
<% end %>

<% if @foo%>
    $("#tr_<%=@foo.name %>").hide()
<% end %>
$("#dialog").dialog("close").remove();

Answer 1

简单的javascript

var button = document.getElementById("yourbuttonid");
button.addEventListener("click", drawSomething, false);

或jquery语法

$("#yourbuttonid").on("click",function(){
    drawSomething();
});

Answer 2

如果您希望在替换元素并关闭对话框后调用该函数，您应该可以将其简单地添加到js.erb文件的末尾：

drawSomething();

如何从同一视图文件夹中的js.erb文件调用html.erb文件中的jquery函数

2 个答案: