event click jquery doesn't work in backbone.js

Question

I want to ask something in backbone.js, why my click event doesn't work but if it uses hover, it will work. So this is the code

uses hover event :

maps.fetch({
            data: params,
            success: function (collection, response) {

                //console.log(response);

                var data = null;
                if (response.status === "success"){
                    data = response.data;
                }

                var $tooltip = $('#tooltip-summary');

                $('.land').hover(function() {

                    var html = '';

                    var id = $(this).attr('id');
                    var position = $(this).position();

                    if(data !== null){
                        var map = data[id];

                        $('#province_name').text(map.province_name);

                        if(map.values === undefined || map.values === null){
                            html += '<tr>';
                            html += '<td class="text-center" colspan="7"> Data not found </td>';
                            html += '</tr>';
                        }else{
                            _.each(map.values, function(value) {

                                var img_arrow = '';

                                if(value.price_weekly > 0){
                                    img_arrow = '<img src="assets/img/arrow_up.png"/>';

                                }else if(value.price_weekly < 0){
                                    img_arrow = '<img src="assets/img/arrow_down.png"/>';
                                }

                                html += '<tr>';
                                html += '<td>'+ value.product_name +'</td>';
                                html += '<td>'+ value.price_buy_avg_fmt +'</td>';
                                html += '<td>'+ value.price_sell_avg_fmt +'</td>';
                                html += '<td>'+ img_arrow+' '+value.price_weekly_fmt +'</td>';
                                html += '<td>'+ value.total_volume_fmt +'</td>';
                                html += '<td>'+ value.market_share_percentage_store_fmt +'</td>';
                                html += '<td>'+ value.market_share_percentage_asi_fmt +'</td>';
                                html += '</tr>';
                            });
                        }

                    }else{
                        html = '';
                        html += '<tr>';
                        html += '<td class="text-center" colspan="7"> Data not found </td>';
                        html += '</tr>';
                    }

                    $tbody.html(html);

                    $tooltip.css({
                        display: 'block',
                        position: 'absolute',
                        top: ((position.top+60)-mapPosition.top)+'px',
                        left: ((position.left+73)-mapPosition.left)+'px',
                    });
                }, function() {
                    //console.log('on mouseout');
                    //$('#tooltip-summary').css('display', 'none');
                });
            }
        });

use click event :

maps.fetch({
            data: params,
            success: function (collection, response) {

                //console.log(response);

                var data = null;
                if (response.status === "success"){
                    data = response.data;
                }

                var $tooltip = $('#tooltip-summary');

                $('.land').click(function(event) {
                    event.preventDefault();

                    var html = '';

                    var id = $(this).attr('id');
                    var position = $(this).position();

                    if(data !== null){
                        var map = data[id];

                        $('#province_name').text(map.province_name);

                        if(map.values === undefined || map.values === null){
                            html += '<tr>';
                            html += '<td class="text-center" colspan="7"> Data not found </td>';
                            html += '</tr>';
                        }else{
                            _.each(map.values, function(value) {

                                var img_arrow = '';

                                if(value.price_weekly > 0){
                                    img_arrow = '<img src="assets/img/arrow_up.png"/>';

                                }else if(value.price_weekly < 0){
                                    img_arrow = '<img src="assets/img/arrow_down.png"/>';
                                }

                                html += '<tr>';
                                html += '<td>'+ value.product_name +'</td>';
                                html += '<td>'+ value.price_buy_avg_fmt +'</td>';
                                html += '<td>'+ value.price_sell_avg_fmt +'</td>';
                                html += '<td>'+ img_arrow+' '+value.price_weekly_fmt +'</td>';
                                html += '<td>'+ value.total_volume_fmt +'</td>';
                                html += '<td>'+ value.market_share_percentage_store_fmt +'</td>';
                                html += '<td>'+ value.market_share_percentage_asi_fmt +'</td>';
                                html += '</tr>';
                            });
                        }

                    }else{
                        html = '';
                        html += '<tr>';
                        html += '<td class="text-center" colspan="7"> Data not found </td>';
                        html += '</tr>';
                    }

                    $tbody.html(html);

                    $tooltip.css({
                        display: 'block',
                        position: 'absolute',
                        top: ((position.top+60)-mapPosition.top)+'px',
                        left: ((position.left+73)-mapPosition.left)+'px',
                    });
                }, function() {
                    //console.log('on mouseout');
                    //$('#tooltip-summary').css('display', 'none');
                });
            }
        });

I checked the console, the click event didn't fire the code. Is there any wrong in my code ? Grateful for any advice. Thankyou

Answer 1

As per @A.woff's comment, you have to put one callback, otherwise the first function will be used as eventData for the second callback and second callback is doing nothing. So remove this:

, function() {
    //console.log('on mouseout');
    //$('#tooltip-summary').css('display', 'none');
}

Currently you are doing this:

$(selector).click(eventData, handler);

What is says first parameter eventData is the first anonymous function you passed will be used as data to get it in the handler which is your second anonymous function which is just blank.

$('.land').click(function(event) { // <----this one is treated as "eventData"
    event.preventDefault();
    // other code
}, function() {   // <----------and this one treated as handler for the click.
    //console.log('on mouseout');
    //$('#tooltip-summary').css('display', 'none');
});