如何在按钮点击时调用JQuery函数?

时间:2015-02-27 04:45:47

标签: javascript jquery function

我有一个JQuery函数,通过使用JSON文件来获取并显示一个页面的图像。我希望在单击按钮时显示下一组图像,但这需要在请求URL上添加一个短字符串,在我第一次运行脚本时会找到并存储在var中。我需要再次调用这个JQuery函数并将字符串var传递给它(下面的代码中的lastId)。我是一个普通的JavaScript用户,并且不知道如何去做。

以下是代码的完整版本:

$(function runthis(un){
   var lastId;
   un = typeof un !== 'undefined' ? un : "";
  $('#domainform').on('submit', function(event){
    event.preventDefault();
    $('#content').html('<center><img src="img/loader.gif" alt="loading..."></center>');

    //var lastId;
    var domain = $('#s').val();
    var newdomain = domain.replace(/\//g, ''); // remove all slashes
    var requrl = "http://www.reddit.com/r/";
    var getmore;

    getmore = "?after=t3_"+un; 

    var fullurlll = requrl + domain + ".json" + getmore;

    $.getJSON(fullurlll, function(json){
      var listing = json.data.children;
      var html = '<ul class="linklist">\n';

      for(var i=0, l=listing.length; i<20; i++) {
        var obj = listing[i].data;

        var votes     = obj.score;
        var title     = obj.title;
        var subtime   = obj.created_utc;
        var thumb     = obj.thumbnail;
        var subrdt    = "/r/"+obj.subreddit;
        var redditurl = "http://www.reddit.com"+obj.permalink;
        var subrdturl = "http://www.reddit.com/r/"+obj.subreddit+"/";
        var exturl    = obj.url;
        var imgr      = exturl;
        var imgrlnk   = imgr.replace("target=%22_blank%22","");

        var length = 14;
        var myString = imgrlnk;
        var mycon = imgrlnk;
        var end = mycon.substring(0,14);
        myString.slice(-4);
        var test1 = myString.charAt(0);
        var test2 = myString.charAt(1);

        var timeago = timeSince(subtime);

        if(obj.thumbnail === 'default' || obj.thumbnail === 'nsfw' || obj.thumbnail === '')
          thumb = 'img/default-thumb.png';

        if(end == "http://i.imgur" ){  
          $("#MyEdit").html(exturl);
          html += '<li class="clearfix">\n';
          html += '<img src="'+imgrlnk+'" style="max-width:100%; max-height:750px;">\n';
          html += '</li>\n';
          html += '<div class="linkdetails"><h2><a href="'+imgrlnk+'" style="text-decoration: none; font-size:2em">'+title+'</a></h2>\n';
          /*html += '<p class="subrdt">posted to  <a href="'+subrdturl+'" target="_blank">'+subrdt+'</a> '+timeago+'</p>'; /*'+test1+test2+'*/
          html += '</div></li>\n';
        }

        if (listing && listing.length > 0) {
            lastId = listing[listing.length - 1].data.id;
        } else {
            lastId = undefined;
        }

      } // end for{} loop

      htmlOutput(html);

    }); // end getJSON()
  }); // end .on(submit) listener

  function htmlOutput(html) {
    html += '</ul>';

    $('#content').html(html);
  }   
});

2 个答案:

答案 0 :(得分:0)

您当前正在执行该功能的方式运行此功能并不能为您提供该功能的句柄。这意味着它只存在于document.ready的上下文中($(function())是一个快捷方式)。

您要做的是保留对此功能的引用以供日后使用。

如果您希望能够将其直接放入onclick='',则需要将该功能置于全局,

例如:

var myFunction = function() { /*Stuff here*/}
$(myFunction)

这声明了一个名为myFunction的函数,然后告诉jQuery在文档就绪

上执行它

全球通常被认为是非常顽皮的编辑。一个稍微好一点的选择是将点击分配到javascript中的按钮

例如:

$(function(){ 
   var myFunction = function() { /*Stuff here*/}
   myFunction(); //call it here
   $('#my-button-id').click(myFunction);//attach a click event to the button
)

这意味着函数myFunction仅存在于document.ready的范围内,而不是全局范围(并且您根本不需要onclick=''

答案 1 :(得分:-2)

在某些事件上添加侦听器,您可以使用live('click',function(){}),例如:

<div id="my-button">some content</div>
<script type="text/javascript">
$('#my-button').live('click',function(){
//your code 
})
</script>