事件点击jquery在骨干.js中不起作用

Question

我想问一个关于lobb.js的问题，为什么我的点击事件不起作用，但是如果它使用了悬停，它将起作用。 所以这是代码

使用悬停事件：

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');
                });
            }
        });

使用点击事件：

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');
                });
            }
        });

我检查了控制台，单击事件未触发代码。 我的代码有什么错误吗？ 感谢任何建议。 谢谢

Answer 1

根据@ A.woff的注释，您必须放置一个回调，否则第一个函数将用作第二个回调的eventData，而第二个回调则不执行任何操作。 因此，删除此：

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

当前，您正在执行此操作：

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

第一个参数eventData是您传递的第一个匿名函数，它将用作在handler获取它的data ，而该handler是您的第二个匿名函数，该函数为空。

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