将one on.click设置为更多操作-javascript和jQuery

Question

I have some dynamic generate buttons that will take me to a specific page.

I need to retrieve the data-num automatically generated for every button, use it to set the jQuery selector for the same button. So when I click the button, I will be redirect to the page (of pdf.js).

In my solutions though, I need to click two times to go to the page.

• the first click is to set the variable i
• the second click is to actually go to the page

I'm searchig for a fancy solution that allows me to do one click only

 $('.pag').click(function(){ let i= $(this).data('num'); //let desiredPage= $(this).data('num'); console.log(i); console.log(i); $('#pag-'+ i).click(function(){ queueRenderPage(i); }) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="pag-1" data-num="1" class="prev-next pag">1</div> <div id="pag-2" data-num="2" class="prev-next pag">2</div> <div id="pag-3" data-num="3" class="prev-next pag">3</div> <div id="pag-4" data-num="4" class="prev-next pag">4</div> ..... 

Answer 1

Simply execute queueRenderPage() on the first click with the corresponding number:

 $('.pag').click(function() { let i = $(this).data('num'); queueRenderPage(i); }) // function queueRenderPage(i) { console.log("queueRenderPage("+i+")"); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="pag-1" data-num="1" class="prev-next pag">1</div> <div id="pag-2" data-num="2" class="prev-next pag">2</div> <div id="pag-3" data-num="3" class="prev-next pag">3</div> <div id="pag-4" data-num="4" class="prev-next pag">4</div> ..... 

Answer 2

You don't need to use a function to execute this.

 $('.pag').click(function(){ let i= $(this).data('num'); //let desiredPage= $(this).data('num'); console.log(i); queueRenderPage(i); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="pag-1" data-num="1" class="prev-next pag">1</div> <div id="pag-2" data-num="2" class="prev-next pag">2</div> <div id="pag-3" data-num="3" class="prev-next pag">3</div> <div id="pag-4" data-num="4" class="prev-next pag">4</div> .....