CODEWITHSUNDEEP
javascriptjqueryhtml
Chris K.
Chris K.

Reputation: 153

How to attach focus handler to table cell (TD Element)?

I have a rather simple problem.

With a table cell, how to I set a focus handler to it? The table cell (TD element) has a tabindex attribute set to zero and the element receives focus in the browser.

But, my event handler below is not firing. What gives?

Thank you.

$("td").on('focus', function () {
    $("#divContainerID").html($(this).html());
});

Upvotes: 1

Views: 990

Answers (1)

Lajos Arpad
Lajos Arpad

Reputation: 76436

You run the handler at a certain moment. Later, you generate the td elements. But they were not existent when you defined the event. You need to find a selector, which already exists when you run the handler. In worst case it is "body" and you attach the handler inside a loader handler of $(function() {});

I will denote the selector you need as a selector variable, which is supposed to hold the right selector, pointing to a selection of tags, which already exists when you define the event and all the targeted td elements will be inside those:

$(selector).on('focus', "td", function () {
    $("#divContainerID").html($(this).html());
});

Note, that with the .on() I am using above selector is expected to describe all the elements holding current or future td elements where the event is desirable and the elements matching the selector must be already existent when you attach the event handler.

Upvotes: 1

Related Questions