jQuery: Trigger click event of tag on key-down

Question

I have created one html page that shows images & navigates to other images based on right and left arrow key press.

There is an anchor tag with download attribute. The path of images which is displayed on screen currently is set to href of this tag through jquery.

Clicking this link downloads the image. I need that on pressing of down arrow, image should be downloaded. (in short this anchor tag's click event should be triggered.)

I tried jquery trigger function but not working. Below is my code.

Thanks in advance.

<!doctype HTML>
<html>
<head>
<title>My Page</title>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
div.links {
    top: 95%;
    left: 45%;
    position: fixed;
}

a.dLink, a.nav {
    text-decoration: none;
}

label {
    background: #330033;
    padding: 2px;
    color: #CC9933;
    cursor: pointer;
}
</style>
</head>

<body>
    <input type="hidden" id="iNames"
        value="IMG1.jpg,IMG2.jpg,IMG3.jpg">
    <img class="pic" />
    <div class="links">
        <label class="prev">Prev</label>
        <a class="dLink" href="" download>
           <label>Download</label>
        </a>
        <label class="next">Next</label>
    </div>
    <script type="text/javascript">
        $(document).ready(
                function() {
                    iNames = ($("#iNames").val()).split(",");
                    total = iNames.length;
                    i = 0;
                    $("img.pic").attr("src",iNames[i]);
                    $("a.dLink").attr("href", $("img.pic").attr("src"));
                    $(document).keydown(function(e) {
                        switch (e.which) {
                        case 37: // left
                            prev();
                            break;

                        case 39: // right
                            next();
                            break;
                        case 40: // down
                            $("a#dLink").trigger("click"); //this is not working
                            break;
                        default:
                            return; 
                        }
                    });

                    function next() {
                        i = i == total - 1 ? 0 : i + 1;
                        setImage();
                    }
                    function prev() {
                        i = i == 0 ? total - 1 : i - 1;
                        setImage();
                    }
                    function setImage() {
                        $("img.pic").attr("src",iNames[i]);
                        $("a.dLink").attr("href", $("img.pic").attr("src"));
                    }
                    $("label.next").click(function() {
                        next();
                    });
                    $("label.prev").click(function() {
                        prev();
                    });
                });
    </script>
</body>
</html>

possible duplicate of [Javascript, programmatically trigger file download in firefox](http://stackoverflow.com/questions/12676649/javascript-programmatically-trigger-file-download-in-firefox) — makeitmorehuman, Jan 13 '15 at 12:46

score 2 · Accepted Answer · answered Jan 13 '15 at 12:49

2

Trigger native click event calling DOM node method instead: {need to use class selector, not ID}

$(".dLink")[0].click();

answered Jan 13 '15 at 12:49

A. Wolff

74,033
9
94
155

Not working.. error : Uncaught TypeError: Cannot read property 'click' of undefined – gkd Jan 13 '15 at 12:51
This worked.. but didn't get difference between `$(".dLink")[0].click();` and `$("a.dLink").trigger("click");` – gkd Jan 13 '15 at 12:56
`.dLink` will trigger for any element with that class, while `a.dLink` will trigger only for mentioned class associated with any ``. – Ravi Dhoriya ツ Jan 13 '15 at 13:02

Ravi Dhoriya ツ · Answer 2 · 2015-01-13T12:58:48.517

1

There is a small typo.

Try this:

$("a.dLink")[0].click();

Demo

Since, dLink is the class applied to <a>. You have to use a.dLink selector.

edited Jan 13 '15 at 12:58

answered Jan 13 '15 at 12:50

Ravi Dhoriya ツ

4,435
8
37
48

I have only one anchor tag in page as shown in code + only one element with class "dLink". this worked.. – gkd Jan 13 '15 at 14:19

jQuery: Trigger click event of tag on key-down

2 Answers2