Question

我想在backbone.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是你传递的第一个匿名函数将被用作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');
});

事件单击jquery在backbone.js中不起作用

1 个答案: