Binding an existing jQuery function to a link

Question

I'm trying to trigger existing jQuery function with click. I been told that this can be done by .bind: http://api.jquery.com/bind/

I'm using below code to swipe trought images:

a) swipe left = I don't like it

b) swipe right = I like it

I want to be able to do exactly the same with clicking on the links.

*.js code:

jQuery(function($){

    var likedCount = 0;

    $('.postswiper-post').live('swiperight',function(){
        if ( !$(this).hasClass('rot-left') && !$(this).hasClass('rot-right') ){
            $(this).addClass('rot-left');
            $('.postswiper-post').find('.status').remove();

            $(this).append('<div class="status like">Like!</div>');
            likedCount++;

            var postTitle = $(this).find('.postswiper-posttitle').html();
            $('.postswiper-likedlist-list').append('<div class="postswiper-likedlist-liked">' + postTitle + '</div>');
            $('.postswiper-likedlist-count').text('View my liked items (' + likedCount + ')');

            if ( $('.postswiper-likedlist-opener').hasClass('disabled') ) {
                $('.postswiper-likedlist-opener').removeClass('disabled');
            }

            if ($(this).is(':last-child')) {
                $('.postswiper-wrapper > p').css('color','inherit');
            }
        }
    });

    //

jQuery: https://gist.github.com/edoardoo/89e672f22fa405799fdd

/*! jQuery Mobile v1.4.5 | Copyright 2010, 2014 jQuery Foundation, Inc. | jquery.org/license */

I have added following html code to my page:


<div class="colnew"><a class="click-right" href="/" onclick="return false;">LOVE IT!</a></div>

and to *.js file:

jQuery(function($){

    var likedCount = 0;

    $('.postswiper-post').live('swiperight',function(){
        if ( !$(this).hasClass('rot-left') && !$(this).hasClass('rot-right') ){
            $(this).addClass('rot-left');
            $('.postswiper-post').find('.status').remove();

            $(this).append('<div class="status like">Like!</div>');
            likedCount++;

            var postTitle = $(this).find('.postswiper-posttitle').html();
            $('.postswiper-likedlist-list').append('<div class="postswiper-likedlist-liked">' + postTitle + '</div>');
            $('.postswiper-likedlist-count').text('View my liked items (' + likedCount + ')');

            if ( $('.postswiper-likedlist-opener').hasClass('disabled') ) {
                $('.postswiper-likedlist-opener').removeClass('disabled');
            }

            if ($(this).is(':last-child')) {
                $('.postswiper-wrapper > p').css('color','inherit');
            }
        }
    });

//my bind code 

    function fBindFunctionToElement(){
   $('.click-right').bind('swiperight',function(){
        if ( !$(this).hasClass('rot-left') && !$(this).hasClass('rot-right') ){
            $(this).addClass('rot-left');
            $('.postswiper-post').find('.status').remove();

            $(this).append('<div class="status like">Like!</div>');
            likedCount++;

            var postTitle = $(this).find('.postswiper-posttitle').html();
            $('.postswiper-likedlist-list').append('<div class="postswiper-likedlist-liked">' + postTitle + '</div>');
            $('.postswiper-likedlist-count').text('View my liked items (' + likedCount + ')');

            if ( $('.postswiper-likedlist-opener').hasClass('disabled') ) {
                $('.postswiper-likedlist-opener').removeClass('disabled');
            }

            if ($(this).is(':last-child')) {
                $('.postswiper-wrapper > p').css('color','inherit');
            }
        }
    });
(...)

When I click on "LOVE IT" link it doesn't trigger the jQuery function.

1. What I'm doing wrong?

2. Is there any other way to call existing jQuery function with click?

Edit:

The solution below partially solves the problem:

$(document).on("click",".click-right",function() { 
if ( !$(this).hasClass('rot-left') && !$(this).hasClass('rot-right') ){
            $(this).addClass('rot-left');
            $('.postswiper-post').find('.status').remove();

            $(this).append('<div class="status like">Like!</div>');
            likedCount++;

            var postTitle = $(this).find('.postswiper-posttitle').html();
            $('.postswiper-likedlist-list').append('<div class="postswiper-likedlist-liked">' + postTitle + '</div>');
            $('.postswiper-likedlist-count').text('View my liked items (' + likedCount + ')');

            if ( $('.postswiper-likedlist-opener').hasClass('disabled') ) {
                $('.postswiper-likedlist-opener').removeClass('disabled');
            }

            if ($(this).is(':last-child')) {
                $('.postswiper-wrapper > p').css('color','inherit');
            }
        }
    });

When I'm clicking on "LOVE IT" this part of the code is triggered

$('.postswiper-likedlist-count').text('View my liked items (' + likedCount + ')');

but I can't get image to reload same as if I was using mouse swipe. I have a feeling that I forgotten something, something very obvious lol

You were told incorrectly... .bind doesn't trigger anything. — Kevin B, Jan 28 '19 at 19:27
You don't appear to be actually calling `fBindFunctionToElement`, so your code never actually does anything. — Kevin B, Jan 28 '19 at 19:29
@Kevin B Any advice how can I achieve my goal and trigger mentioned jQuery function by clicking on "LOVE IT!" link? — Kris, Jan 28 '19 at 19:34
Start by running the code you've written. Currently it's inside of a function that never gets called. — Kevin B, Jan 28 '19 at 19:35
What version of jQuery are you using? Both `.bind()` and `.live()` were replaced with `.on()` back in jQuery 1.7... — cssyphus, Jan 28 '19 at 19:43
@gibberish It's `/*! jQuery Mobile v1.4.5 | Copyright 2010, 2014 jQuery Foundation, Inc. | jquery.org/license */` — Kris, Jan 28 '19 at 19:44
Alright, I'm just guessing about jQuery mobile from my experience with jQuery itself.. Feedback says I'm wrong (-1) so I'll delete my answer -- but see this, perhaps it will help: https://stackoverflow.com/questions/2534089/jquery-multiple-events-to-trigger-the-same-function — cssyphus, Jan 28 '19 at 19:54
@nazimboudeffa Did that with ```$(document).on("click",".click-right",function()``` but this only partially solved the problem. Function is triggered when link is clicked but I can't get image to reload same as if I was doing swipe by mouse. — Kris, Jan 28 '19 at 21:30
@gibberish Please add your answer again. If no one presents a better way to solve this, I will mark your answer as the most helpful one. Thanks — Kris, Jan 28 '19 at 21:37

score -1 · Accepted Answer · answered Jan 28 '19 at 19:47

Try this (just a WAG...)

Instead of:

$('.postswiper-post').live('swiperight',function(){

Do:

$(document).on('swiperight click', '.postswiper-post', function(){

Similarly:

   /*  NON-RUNNING CODE SNIPPET -- For Viewing Only  */
   $(document).on('swiperight click', '.click-right'),function(){
        if ( !$(this).hasClass('rot-left') && !$(this).hasClass('rot-right') ){
            $(this).addClass('rot-left');
            $('.postswiper-post').find('.status').remove();

            $(this).append('<div class="status like">Like!</div>');
            likedCount++;

            var postTitle = $(this).find('.postswiper-posttitle').html();
            $('.postswiper-likedlist-list').append('<div class="postswiper-likedlist-liked">' + postTitle + '</div>');
            $('.postswiper-likedlist-count').text('View my liked items (' + likedCount + ')');

            if ( $('.postswiper-likedlist-opener').hasClass('disabled') ) {
                $('.postswiper-likedlist-opener').removeClass('disabled');
            }

            if ($(this).is(':last-child')) {
                $('.postswiper-wrapper > p').css('color','inherit');
            }
        }
    });

Binding an existing jQuery function to a link

1 Answers1