backbone.js에서 뭔가 물어보고 싶습니다. 왜 클릭 이벤트가 작동하지 않지만 hover를 사용하면 작동합니다. 그래서 이것은 코드입니다
호버 이벤트를 사용합니다.
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');
});
}
});
콘솔을 확인했지만 클릭 이벤트가 코드를 실행하지 않았습니다. 내 코드에 문제가 있습니까? 조언에 감사드립니다. 감사합니다
당으로 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');
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다