Не работает клик при входе на страницу

219

11 сентября 2021, 16:30

Сделал вот такое:

 <button id="block1"></button> 
<script type="text/javascript">  
$(document).ready(function(){
    $.get('/shop/invoices', function (data) {  
    $('#block1').html( $('.col_inv_id', data).html() ) 
});
}); 
</script> 
 <script type='text/javascript'>
setTimeout(function(){
  $('#block1 a').trigger('click');
}, 8000);
$('#block1 a').click(function() {console.log('click')})
</script>

По идеи, при входе на страницу должен был произойти клик по кнопке и переход на нужную страницу. Кусок, который подгружается:

 <button id="block1"><a href="/shop/order/UqSUWOw423YzfeP9yt0DAU5hg9ZnvUdNI6MVPsko" title="Просмотр заказа">00018</a><small><a href="javascript://" onclick="return invoiceJournal('18')">журнал</a></small></button>

а также вторая ссылка скрыта

 <style>#block small a {pointer-events: none;cursor: default;display:none}</style>

При входе на страницу через 8сек. должен быть клик и переход на нужную страницу, но его нет.Как это можно исправить?

Answer 1

Проблема в том, что после загрузки страницы отправляется ajax запрос, и паралельно в это же время Вы вешаете обработчик на тег a которого в принципе нет так как ajax запрос еще не выполнился. В результате $(#block1 a) вернёт null. Ниже код со вставленной ссылкой a как буд-то ajax завершился и клик работает. Второй код в качестве решения под Вашу задачу, если работать не будет проверяйте что возвращает get запрос. Ну и .col_inv_id этот класс. так как Вы его не указали.

UPD. Добавлен редирект на сайт! средствами js и в первом и во втором случае.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <button id="block1"><a href="https://ru.stackoverflow.com">Ссылка</a></button>  
<script type="text/javascript">   
$(document).ready(function(){ 
    $.get('/shop/invoices', function (data) {   
    $('#block1').html( $('.col_inv_id', data).html() )  
}); 
});  
</script>  
 <script type='text/javascript'> 
setTimeout(function(){ 
  var link = $('#block1 a').attr('href'); 
  window.location.replace(link); 
}, 8000); 
 
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <button id="block1"> 
         
    </button>  
<script type="text/javascript">   
$(document).ready(function(){ 
    $.get('/shop/invoices', function (data) {   
        $('#block1').html( $('.col_inv_id', data).html() ); 
        setTimeout(function(){ 
          var link = $('#block1 a').attr('href'); 
          window.location.replace(link); 
        }, 8000); 
    }); 
});  
</script>

Answer 2

var banner = $("#banner-message") 
var button = $("button") 
 
button.click(() => { 
  banner.addClass("alt"); 
  console.log('Был клик по кнопке'); 
}); 
 
setTimeout(() => button.trigger("click"), 2000);

body { 
  background: #20262E; 
  padding: 20px; 
  font-family: Helvetica; 
} 
 
#banner-message { 
  background: #fff; 
  border-radius: 4px; 
  padding: 20px; 
  font-size: 25px; 
  text-align: center; 
  transition: all 0.2s; 
  margin: 0 auto; 
  width: 300px; 
} 
 
button { 
  background: #0084ff; 
  border: none; 
  border-radius: 5px; 
  padding: 8px 14px; 
  font-size: 15px; 
  color: #fff; 
} 
 
#banner-message.alt { 
  background: #0084ff; 
  color: #fff; 
  margin-top: 40px; 
  width: 200px; 
} 
 
#banner-message.alt button { 
  background: #fff; 
  color: #000; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="banner-message"> 
  <p>Hello World</p> 
  <button>Change color</button> 
</div>