Doesn't seem to be working. I am trying to watch the esri-popup__pagination-next class. This the code I've tried. Is there a better way to do this? $ ( ".esri-popup__pagination-next" ) . on ( "click" , function ( e ) { query ( ".esri-popup__pagination-next" ) . on ( "click" , function ( e ) {

Jay, Your issue is that the popup next button is not part of the dom when you execute that code so the query returns a null pointer. You need to ensure the object exists in the dom first. watchUtils . whenOnce ( view . popup , "visible" , function ( ) { query ( ".esri-popup__button.esri-popup__pagination-next" ) . on ( "click" , function ( e ) { console . info ( e ) ; } ) ; } ) ;

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Using jQuery to watch for an on click event for the popup pagination

JayHill

Doesn't seem to be working.

I am trying to watch the esri-popup__pagination-next class.

This the code I've tried. Is there a better way to do this?

<SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">".esri-popup__pagination-next"</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

<SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".esri-popup__pagination-next"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Encontre mais publicações marcadas com

Accepted answers

RobertScheitlin__GISP

Jay,

Your issue is that the popup next button is not part of the dom when you execute that code so the query returns a null pointer. You need to ensure the object exists in the dom first.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenOnce</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"visible"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".esri-popup__button.esri-popup__pagination-next"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

RobertScheitlin__GISP

Jay,

Your issue is that the popup next button is not part of the dom when you execute that code so the query returns a null pointer. You need to ensure the object exists in the dom first.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenOnce</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"visible"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".esri-popup__button.esri-popup__pagination-next"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

JayHill

Thanks Robert!

It is now working, although only for the previous button, not the next button. It also fires when you click on the numbers. I have it querying ".esri-popup__button"

I have tried quite a few combinations of classes and elements. I think.

Any idea why it wouldn't fire on the next button?

JayHill

.esri-popup__navigation worked!

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.