Appeler une fonction jquery au click

Bonjour,

Le script suivant permet de charger des nouveaux box à chaque fois que la page défile.
Le script fonctionne bien mais dans mon cas, j'ai besoin que l'affichage des blocs ne se fait que lorsqu'on clique sur un bouton "SUIVANT".

Merci de votre aide

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<script>
		    (function ($){
			var $tiles = $('#tiles'),
		          $handler = $('li', $tiles),
		          $main = $('#main'),
		          $window = $(window),
		          $document = $(document),
		          options = {
		            autoResize: true, // This will auto-update the layout when the browser window is resized.
		            container: $main, // Optional, used for some extra CSS styling
		            offset: 22, // Optional, the distance between grid items
		            //itemWidth:200 // Optional, the width of a grid item
		          };
		      /*** Reinitializes the wookmark handler after all images have loaded */
 
		      function applyLayout() {
		        $tiles.imagesLoaded(function() {
		          // Destroy the old handler
		          if ($handler.wookmarkInstance) {
		            $handler.wookmarkInstance.clear();
		          }
 
		          // Create a new layout handler.
		          $handler = $('li', $tiles);
		          $handler.wookmark(options);
		        });
		      }
		      /**
		       * When scrolled all the way to the bottom, add more tiles
		       */
	var i = 10;
	function onScroll() {		
			$.ajax({ url: 'mResults.php?rub=22&limit='+i,
			data: {action: 'test'},
			type: 'post',
			success: function(output) {
			$tiles.append(output);
                  }
			});
			i = i+10;
				  applyLayout();
		      };
		      // Capture scroll event.
 
		$window.bind('scroll.wookmark', onScroll);
 
		 applyLayout();
 
		})(jQuery);
</script>
<div id="next">Suivant</div>