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

Я уже объяснял это в приведенной выше ссылке: р

Подробная информация: Это не все, но я думаю, что есть хороший шанс, что проблема где-то внутри кода, который я показал ниже. Я также изменил имена переменных и имена классов. Мне жаль, что я не могу показать все, потому что это конфиденциально.

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

Answer 1

Вы должны прочитать о якорях, чтобы увидеть, что вы пытаетесь сделать, это поведение по умолчанию браузера.

Answer 2

Попробуйте назначить обработчик on родительскому элементу. Обратите внимание на a в селекторе, который отсутствует в вашем коде.

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

      //your code 


    }); 

по методу может быть связан с родительскими элементами, а затем нажмите динамически присоединять к любым детям этого элемента, что нагрузка после первоначальной установки DOM. Пока каждый новый элемент, добавленный к a, называется «gotobtn», он должен работать.

Вы можете найти более глубокого ответ here

Answer 3

Вы могли бы добиться этого с помощью метода animate() и прокрутки HTML/тела элемента после того, как нажата ссылка (после предупреждения поведения по умолчанию, который будет помещая # в 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>