Posted in jquery
17
3:24 am, March 9, 2021

add click event to multiple link items

this allows you to get every a element in a-div class and stop the link from loading, so you can do other things with it like run a function or something else

Functions used:

Javascript

Wait for the document to be ready before running this.

$(document).ready(function(){ });

Javascript

Attach a click event to all a elements inside the div with the class name a-div

$('.a-div a').click( function(event){ });

Javascript

Stop the links from loading the href url

event.preventDefault();

Javascript

Show a browser prompt with the href value of the link

alert('you clicked ' + this);

HTML

<div class='a-div'>
<div class="list-group">
    <a href="/view/content/43j8M/quickest-way-to-get-the-yack-track-monster-killing-task-done/" class="list-group-item list-group-item-action text-truncate" title="Quickest way to get the Yack Track Monster Killing task done" data-toggle="tooltip"><span class="badge badge-info">rs3</span> Quickest way to get the Yack Track Monster Killing task done</a>  
<a href="/view/content/IwjZ5/google-chrome-tabs-not-saving-when-reloading-the-browser/" class="list-group-item list-group-item-action text-truncate" title="google chrome tabs not saving when reloading the browser" data-toggle="tooltip"><span class="badge badge-info">apps</span> google chrome tabs not saving when reloading the browser</a>  
<a href="/view/content/xaUP7/tim-and-crunchy-location-rs3/" class="list-group-item list-group-item-action text-truncate" title="Tim and Crunchy Location RS3" data-toggle="tooltip"><span class="badge badge-info">rs3</span> Tim and Crunchy Location RS3</a>  
<a href="/view/content/HJpFl/atom-editor-useful-keyboard-shortcuts/" class="list-group-item list-group-item-action text-truncate" title="atom editor useful keyboard shortcuts" data-toggle="tooltip"><span class="badge badge-info">atom</span> atom editor useful keyboard shortcuts</a>  
<a href="/view/content/TM928/getting-a-random-cursor-in-my-chrome-browser/" class="list-group-item list-group-item-action text-truncate" title="getting a random cursor in my chrome browser" data-toggle="tooltip"><span class="badge badge-info">apps</span> getting a random cursor in my chrome browser</a>  
<a href="/view/content/RJOfc/factorio-blueprint-books/" class="list-group-item list-group-item-action text-truncate" title="Factorio Blueprint Books" data-toggle="tooltip"><span class="badge badge-info">factorio</span> Factorio Blueprint Books</a>  
<a href="/view/content/HCLjy/purple-partyhat-price-info-feb-21/" class="list-group-item list-group-item-action text-truncate" title="purple partyhat price info feb 21" data-toggle="tooltip"><span class="badge badge-info">rs3</span> purple partyhat price info feb 21</a>  
<a href="/view/content/5a7E3/level-3-to-all-capes--ultimate-runescape-guide/" class="list-group-item list-group-item-action text-truncate" title="Level 3 to All Capes - Ultimate Runescape Guide" data-toggle="tooltip"><span class="badge badge-info">rs3</span> Level 3 to All Capes - Ultimate Runescape Guide</a>  

    </div>
</div>

Javascript

$(document).ready(function(){
$('.a-div a').click( function(event){
		alert('you clicked ' + this);
		event.preventDefault();
	});
  });

View Statistics
This Week
40
This Month
370
This Year
0

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote
Treasure every moment that you have and treasure it more because you shared it with someone special, special enough to spend your time...and remember that time waits for no one.
Unknown