jquery：不关注每隔几秒加载的元素

Question

这是这个问题的延续： 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();
});

它不工作:'(

注意：

<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、today.php、昨天.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';


?>

ma​​incontent.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 });
  });
});

Answer 1

您可以通过使用animate() 方法实现此目的，并在单击链接后将 html/body 滚动到元素（在防止将 # 放入 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>

Answer 2

您应该阅读有关锚点的信息，以了解您尝试做的是浏览器的默认行为。

Answer 3

尝试将 on 处理程序分配给父元素。注意代码中缺少的选择器中的 a。

$(document).on('click','a.gotobtn',function()
    {

          //your code


    });

on 方法可以绑定到父元素，然后单击将动态附加到在原始 DOM 设置后加载的该元素的任何子元素。只要您附加到 a 的每个新元素都称为“gotobtn”，它就应该可以工作。

您可以找到更深入的答案here