Question

我正在尝试在onclick中定义一个函数。它无法正常工作，控制台上没有显示错误。我从页面底部调用了函数，我在onclick()中定义了函数，但是它没有工作。

 <div id="content-wrapper">

          <div class="row">
            <div class="col-lg-12">
            <div class="main-box clearfix">
            <div class="clearfix">
              <div class="common_page gsb1">
              <div class="hdr">
                   <div class="row">
                <div class="col-md-4">
                  <h4>Users</h4>
                </div>
                 <div class="col-md-5">
//this is not working  
  <p><a href="" onclick="function send_Data(data){
                    download_csv(data)};">Download </a></p>
                </div>



                <div class="col-md-3 pull-right">
                      <%=render 'search'%>
                </div> 
              </div>    
                     </div>


           <% download_data = []%>

              <%@users.each do |user|%>     

                 <div id='content' class="tab-content">
                    <div class="tab-pane active" id="all">
                      <div class="row">
                      <div class="col-md-4">
                        <p><b>User Name</b> <span class="blue"> <%=user.name %> </span> </p>
                        <%download_data.push(user.name)%>
                       <p><b>user_code</b> <span class="blue"> <%=user.user_code %> </span>  </p>
                         <%download_data.push(user.user_code)%>
                       <p><b>phone</b> <span class="blue"><%=user.phone %></span>  </p>
                        <%download_data.push(user.phone)%>

                    </div>
                   </div>
               </div>

              <%end%>

              <div data-no-turbolink>
                <%if @users.length > 1%>
                  <%= will_paginate @users %>
                <% end %>
              </div>  
                </div>
              </div>
              </div>
            </div>
          </div>

          <footer id="footer-bar" class="row">
            <p id="footer-copyright" class="col-xs-12">
              Powered by abcadas
            </p>
          </footer>
        </div>
      </div>
    </div>
  </div>
  <script >
       $("#zsales").attr("class","active")

       send_Data("<%=download_data%>")
  </script>

Answer 1

你可以定义一个这样的自执行函数：

<p>
    <a href="" onclick="(function send_Data(data){
                                     download_csv(data)
                                   }
                        )(window.data);">Download</a>
</p>

假设您在窗口范围内定义了数据。请参阅：

(function(scope){ ... })(scope)

Answer 2

onclick="function send_Data(data){
                download_csv(data)};">Download </a></p>

你以相反的方式做这件事。你应该在onclick上调用该函数，并在别处定义它。像这样的东西：

<p><a href="" onclick="send_Data()">Download </a></p>

并在剧本中：

<script >
   $("#zsales").attr("class","active")

   function send_Data(data){
       download_csv(data);
   };
</script>

Answer 3

按照设计，您很少会在onclick事件中定义函数。您可以在其他地方定义函数，然后使用onclick事件处理程序调用它们。

<script type="text/javascript">
function sayHi()
{
    alert('Hi!');
}
</script>

<!--
    When the button is clicked,
    you don't want to define the function,
    you want to say hi!
  --->
<a href="#" onclick="sayHi()">

总而言之，您只想从<a>标记中调用您的函数：

<a href="#" onclick="download_csv()"></a>

<script type="text/javascript">
function download_csv()
{
    send_Data("<%=download_data%>")
}
</script>

Answer 4

哇。将近3年为时已晚。但是这样的事吗？将其包含在内部而不是调用它。

Factor

或jQuery：

document.getElementById("yourButton").onclick = function {
    //define your function;
}

其他答案通常是最佳实践，因为它通常可以最大程度地减少混乱，而且您可以一次又一次地使用相同的功能

试图在onclick

4 个答案: