这是这个问题的延续： jquery: how to detect element that is being loaded every few seconds
从上面的链接结果我的代码^工作正常。我不知道为什么它最初没有工作。
现在而不是点击提醒..
我正在尝试滚动到属性href。
中的元素<a href="#scrolltothiselement" class="gotobtn">click</a>
...
<div id="scrolltothiselement"></div>
...
我正是这样做的：
$(document).on('click', '.gotobtn', function() {
var gotothisid = $(this).attr('href');
$(document).find(gotothisid).focus();
return false;
});
我也尝试过：
$(document).unbind().on('click', '.gotobtn', function(event) {
event.preventDefault();
var gotothisid = $(this).attr('href');
$(document).find(gotothisid).focus();
});
它没有工作：＆＃39;（
注意：
<a href="#scrolltothiselement" class="gotobtn">click</a>
...
<div id="scrolltothiselement"></div>
...
加载到index.html中，如
setInterval(
function ()
{
$('.loadHere').unload().load('filetoload.php').fadeIn('slow');
}, 10500);
我已在上面的链接中解释过：p
更多细节： 这不是一切，但我认为问题出现在我在下面显示的代码中的某个地方很有可能。我还更改了变量名和类名。对不起，我无法展示一切，因为它是保密的。
的index.php
<?php include_once 'header.php'; ?>
<input type="hidden" class="currentlyvisibletab" value="" />
<div class="AllDateTimeTabs">
<div id="today" class="datetimetab today-cont">
<?php include_once 'today.php'; ?>
</div>
<div id="tomorrow" class="datetimetab tomorrow-cont">
<?php include_once 'tomorrow.php'; ?>
</div>
<div id="yesterday" class="datetimetab yesterday-cont">
<?php include_once 'yesterday.php'; ?>
</div>
</div>
<div id="testscrollhere">Scroll here. animate code works here.</div>
<?php include_once 'footer.php'; ?>
today.php，tomorrow.php，yesterday.php只有不同的查询结构。
<?php
include_once 'connect.php';
$thisfiledate = date('Y-m-d');
$result = $conn->prepare("SELECT * FROM tbname WHERE field= :thisfiledate AND anotherfield= 'value';");
$result -> bindParam(':thisfiledate', $thisfiledate);
$result->execute();
$displaydate = 'Today '.$thisfiledate;
include 'maincontent.php';
?>
maincontent.php - 我会删除部分内容，因为它们是保密的。但你明白了。 maincontent.php有while循环，显示从表中选择的东西。表中的每一行都有自己的
<div id="'.$row['rownumber'].'">details goes here</div>
顶部有一个赢家按钮，如果点击它，它将滚动到赢家的行。只有一个赢家。获胜者按钮是
`<a href="#123" class="gotobtn">123</a>`
<?php
...
while ($row = $result->fetch(PDO::FETCH_ASSOC))
{
...
$displayall .= '<div class="col-md-1 col-sm-2 col-xs-4 c-cont-col">';
$displayall .= '<div class="c-cont '.$cyellow .'" id="'.$row['rownumber'].'">';
$displayall .= '<h4 class="winnerlabel '.$wiinerlavelinvisibility .'">WINNER</h4>';
$displayall .= '<h4 class="cn-label '.$labelcolor.'">'. $row['rownumber']. '</h4>';
$displayall .='<div class="ci-cont">';
//$displayall .= '<p><b>Date:</b> '.$row['cut_off_date_tmstrans'].'</p>';
$displayall .= '<p><b>label:</b><br>'.number_format($row['x'],2).'</p>';
$displayall .= '<p><b>label2: </b><br>'.number_format($row['y'],2).'</p>';
$displayall .= '<p><b>label3: </b><br>'.number_format($row['z'],2).'</p>';
$displayall .= '</div>';
$displayall .= '</div>';
$displayall .= '</div>';
}
if($haswinner == 0)
{
$winnerboxinvisibility = 'invisibility';
}
else
{
$winnerboxinvisibility = '';
}
echo '<div class="row">';
echo '<div class="col-md-6 col-sm-4 col-xs-12 date-cont-col"> <div class="pull-left date-cont">'.$displaydate.' <div class="zerocountercolordot"></div> '. $zerocounter.' <div class="lessorequaltotencolordot"></div> '.$lessorequaltotencounter.' <div class="lessorequaltotwohundredcolordot"></div> '.$lessorequaltotwohundredcounter.' <div class="greterthantwohundercolordot"></div> '.$greterthantwohundercounter.'</div></div>';
echo '<a href="#'.$winningc.'" class="gotobtn"><div class="col-md-4 col-sm-5 col-xs-12 winning-c-col"> <div class="pull-right winning-c '.$winnerboxinvisibility.'"><p><b>Winner: </b>'.$winningc.'</div></div></a>';
echo '<div class="col-md-2 col-sm-3 col-xs-12 total-cont-col"> <div class="pull-right total-cont"><p><b>Label: </b>'.number_format($variablename,2).'</p></div></div>';
echo '</div>';
echo '<div class="row">';
echo $displayall;
echo '</div>';
?>
custom.js
var currentlyvisibletab;
$('.nav.navbar-nav a').on('click',function(event)
{
event.preventDefault();
loadthisdatetimetab = $(this).attr('href');
$('.datetimetab').hide();
$(loadthisdatetimetab).show();
$('.currentlyvisibletab').val(loadthisdatetimetab);
currentlyvisibletab = loadthisdatetimetab;
});
setInterval(
function ()
{
$.ajax(
{
type: "POST",
url: "timecheck.php",
datatype: "json",
success: function(data)
{
if(data != 'no')//if not scheduled time to change tabs
{
if($('.currentlyvisibletab').val() != data)
{//data is either #today, #tomorrow , #yesterday
$('.currentlyvisibletab').val(data);
currentlyvisibletab = data;
$(currentlyvisibletab).siblings().hide();
$(data).show();
}
}
}
});
}, 3500);
function ()
{
$('#today').unload().load('today.php').fadeIn('slow');
$('#tomorrow').unload().load('tomorrow.php').fadeIn('slow');
$('#yesterday').unload().load('yesterday.php').fadeIn('slow');
$(currentlyvisibletab).siblings().hide();
$(currentlyvisibletab).show();
}, 10599);
function onloadct()/*for <body onload="onloadct()">*/
{
if(window.location.hash)
{
// Fragment exists
var hashvalue = window.location.hash;
$('.datetimetab').hide();
$(hashvalue).show();
currentlyvisibletab = hashvalue;
} else
{
// Fragment doesn't exist
$.ajax(
{
type: "POST",
url: "onloadchecktime.php",
datatype: "json",
success: function(data)
{
if($('.currentlyvisibletab').val() != data)
{
$('.currentlyvisibletab').val(data);
currentlyvisibletab = data;
$(currentlyvisibletab).siblings().hide();
$(data).show();
}
}
});
}
}
/*as suggested in the answer and comments but still doesn't work. removed unbind because it stopped twitter bootstrap navbar from working when collapsed */
$(document).ready(function() {
$(document).on('click', '.gotobtn', function(event)
{
// prevent default behavior (getting the # in the URL)
event.preventDefault();
// get the id of the element that you want to scroll to
var gotothisid = $(this).attr('href');
// scroll the html/body as many pixels as the target element's position
$("body").animate({ scrollTop: $(gotothisid).offset().top });
});
});
答案 0 :(得分：0)
您可以使用animate()方法实现此目的，并在单击链接后将html / body滚动到元素上（在阻止将URL放入URL的默认行为之后）。
要计算要滚动的像素数量，可以使用将返回元素坐标对的offset()方法（您将在.offset().top中对焦以进行垂直滚动）。然后使用与Nick's solution中说明的方法类似的方法，使用html滚动body和scrollTop。
一个简单的演示：
$(document).ready(function() {
$(document).unbind().on('click', '.gotobtn', function(event) {
// prevent default behavior (getting the # in the URL)
event.preventDefault();
// get the id of the element that you want to scroll to
var gotothisid = $(this).attr('href');
// scroll the html/body as many pixels as the target element's position
$("html, body").animate({ scrollTop: $(gotothisid).offset().top });
});
});p { margin-bottom: 12px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a href="#scrolltothiselement" class="gotobtn">click</a></p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<div id="scrolltothiselement">Yes! Scroll here.</div>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
答案 1 :(得分：-2)
您应该阅读有关锚点的信息，以了解您尝试执行的操作是浏览器的默认行为。
答案 2 :(得分：-3)
尝试将on处理程序分配给父元素。注意代码中缺少的a代码。
$(document).on('click','a.gotobtn',function()
{
//your code
});
on方法可以绑定到父元素，然后单击将动态附加到在原始DOM设置之后加载的该元素的任何子元素。只要你附加到a的每个新元素都被称为“gotobtn”，它应该可以工作。
您可以找到更深入的答案here