How could I call a JQuery function upon a button click?

Question

I have a JQuery function that fetches and displays a page worth of images through the use of JSON files. I want to display the next set of images upon a button click, but that requires adding on a short string to the request url, which is found and stored in a var when I first run the script. I need to call this JQuery function again and pass the string var to it (lastId in code below). I am an utter noob with JavaScript in general and don't know how to go about doing that.

Here is a full version of the code:

$(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);
  }   
});

You want to execute your runThis() later on? – undefined Feb 27 '15 at 04:48 — undefined, Feb 27 '15 at 04:48
@Luke Yes, on some action like a button click or such. – countofmontecristo Feb 27 '15 at 04:49 — countofmontecristo, Feb 27 '15 at 04:49

score 0 · Accepted Answer · answered Feb 27 '15 at 04:53

The way you currently are executing the function run this doesn't ever leave you a handle to that function. This means it only really exists in the context of document.ready (what $(function()) is a shortcut for).

What you want to do instead is to keep a reference to this function for later use.

If you want to be able to put it directly into an onclick='' you will need to put the function in global,

eg:

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

this declares a function called myFunction and then tells jQuery to execute it on document ready

Global is generally considered pretty naughty to edit. One slightly better option would be to assign the click to the button inside your javascript

eg:

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

This means that the function myFunction only exists in the scope of your document.ready, not in global scope (and you don't need onclick='' at all)

And if I was to pass the variable would I simply put var myFunction = function(lastId){} and call myFunction(lastId); ? — countofmontecristo, Feb 27 '15 at 05:09
you got it, if you want to pass arguments via the click with $('#my-button-id').click(myFunction); check out this article: http://stackoverflow.com/questions/3273350/jquery-click-pass-parameters-to-user-function — undefined, Feb 27 '15 at 05:13

score -2 · Answer 2 · answered Feb 27 '15 at 04:57

-2

tTo add listener on some event you can use live('click',function(){}) Like yhis:

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

answered Feb 27 '15 at 04:57

winston86

159
1
8

live() has been deprecated for some time now. – Mike Brant Feb 27 '15 at 05:03
Yes but I still use it beacause of dynamic objects on my pages. – winston86 Feb 27 '15 at 05:09

How could I call a JQuery function upon a button click?

2 Answers2