带按钮Onclick功能的Jquery

时间:2017-05-05 06:00:10

标签: javascript jquery html

我刚刚开始进行网页开发,并且有一个从另一个文件中显示的功能loadTweets并显示,当我摆脱按钮时,只是直接将其作为匿名函数运行,但是,它适用于某些原因按钮无法调用该功能。

非常感谢任何帮助,谢谢!

<html>
  <head>
    <script src="jquery.js"></script>
    <script src="data_generator.js"></script>

  </head>
  <button type = "button" onclick="loadTweets"> Load </button>
  <body>
    <script>
      $(document).ready(function(){
        var loadTweets = function(){
          var $body = $('body');
          $body.html('');
          var index = streams.home.length - 1;
          while(index >= 0){
            var tweet = streams.home[index];
            var $tweet = $('<div></div>');
            $tweet.text('@' + tweet.user + ': ' + tweet.message);
            $tweet.appendTo($body);
            index -= 1;
          }
        }
      });
    // });



    </script>
  </body>
</html>

2 个答案:

答案 0 :(得分:4)

您需要在文档就绪处理程序之外定义函数,并将()与函数

一起使用
<button type = "button" onclick="loadTweets()"> Load </button>

<script>
  var loadTweets = function(){
      //
  });
</script>

但是我建议你使用不显眼的事件处理程序。

HTML ,为按钮添加ID属性

<button type="button" id="loadTweets"> Load </button>

脚本,然后使用ID selector定位元素,.on()绑定事件处理程序。

$(document).ready(function () {
    var loadTweets = function () {
        //existing code
    }

    $('#loadTweets').on('click', loadTweets)
});

答案 1 :(得分:0)

您可以使用其他方式

<html>
  <head>
    <script src="jquery.js"></script>
    <script src="data_generator.js"></script>

  </head>
  <body>
  <button type = "button" onclick="loadTweets()"> Load </button>
    <script>
        function loadTweets(){
          var $body = $('body');
          $body.html('');
          var index = streams.home.length - 1;
          while(index >= 0){
            var tweet = streams.home[index];
            var $tweet = $('<div></div>');
            $tweet.text('@' + tweet.user + ': ' + tweet.message);
            $tweet.appendTo($body);
            index -= 1;
          }
        }
    </script>
  </body>
</html>