Trigger an jQuerry event on a target div (specefic class in an span id)

Question

I'm currently trying to associate a click to a right arrow press in a Web application. The thing I have here is working, but pops me every single '.t-input' in my page every single time I click my button. I'm currently using this code :

        comboboxArrowDown.onclick = function () {

            var e = jQuery.Event("keydown");

            e.which = 39; // Key arrow right = 39

            $('.t-input').trigger(e);

        }

This code is working because i'm refering directly to the input class which is : 't-input'. Now, what I want to do is select the input to use. The hard part here, is that diffrent boxes have the same input class name and I can't change that. Can you explan me how to resolve this if my input is in a span with and id="a", which contain a div called class="b" , which contain another div called class="c", and then my input.
I tried to use document.getElementById("a").getElementsByClassName("t-input")[0] but i can't use .trigger on it...

Thanks!

Answer 1

I think you are mixing pure javascript and jQuery.

span with and id="a",

#a

which contain a div called class="b"

.b

, which contain another div called class="c"

.c

, and then my input

.t-input

$("#a > .b > .c > .t-input")

This will get all the objects with class .t-input INSIDE .c INSIDE .b INSIDE the element with id #a

The other answers given will surely get you the same result, but the b could be inside the c or the c inside the b.

Trigger an jQuerry event on a target div (specefic class in an span id)

Sign up