Make Any Elements Clickable With A Data Attribute - jQuery anything-clickable

anything-clickable is a small and cross-browser jQuery plugin which makes any elements (e.g. images, videos, table cells, etc) clickable with just an HTML data attribute.

Ideal for expanding the clickable area of your element to improve the user experience.

See also:

• jQuery Plugin To Increase The Clickable Area For Links - hitMe
• Make Whole Block Content Clickable With JOLD Js-block Plugin

How to use it:

1. Download and put the minified version of the jQuery anything-clickable plugin after jQuery.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="./dist/jquery-anything-clickable.min.js"></script>

2. Initialize the plugin.

new Clickable('data-href');

3. Add the data-href attribute to your elements and specify the URL as follows:

<button data-href="https://www.google.com">Click me</button>

<img data-href="https://www.google.com" src="1.jpg">

<video width="400" controls data-href="https://www.google.com">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<table class="table" data-href="https://www.google.com">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td data-href="https://www.google.com">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td data-href="https://www.google.com">@twitter</td>
    </tr>
  </tbody>
</table>

...

Changelog:

v2.0.0 (2020-05-17)

• Bugfixed

---

This awesome jQuery plugin is developed by Anduin2017. For more Advanced Usages, please check the demo page or visit the official website.