jQuery "focus" works in one instance but not in others

Question

I wrote some code a while ago with the jQuery method focus; it worked then and it still works now. But now I tried writing some virtually identical code with the same method, in the same app, and it didn't do anything. In fact, no newly-written usage of the method works. Even stranger, it doesn't seem to work on jsfiddle either:

https://jsfiddle.net/3jmmL7ya/1/

<div id="click">CLICK ME</div><br>
<input id="focus" name="focus"></input>

<script type="text/javascript">
  $("#click").click(function() {
    $(':input[name="focus"]').focus();
  });

  $("#click").click(function() {
    $("#focus").focus();
  });
</script>

It may be unrelated, but I think it's worth mentioning that I recently had a similar problem with the Rails method respond_to do |format|. It worked in the past, and my old code still works, but new code I write results in an "Unknown Format" error. More details here.

I'm using jQuery 1.10.0 and Rails 4.0.10.

I'm either doing something absurdly stupid, or something pretty bizarre is happening.

UPDATE

Okay I got it to work with

  $("#click").click(function() {
    $("#focus").focus();
  });

But when I type in $("#focus").focus(); in the js console, the input is selected, but nothing happens. Is this expected behavior?

@Satpal I'm so confused...your fiddle works, but I made another one with the EXACT SAME CODE and that one doesn't. Does this fiddle work for you? https://jsfiddle.net/3jmmL7ya/15/ — Joe Morano, May 10 '16 at 06:06
Add the jQuery library and it will work, You have not add the library in your fiddle — Satpal, May 10 '16 at 06:07
You don't need jQuery at all. See [https://jsfiddle.net/3jmmL7ya/28/](https://jsfiddle.net/3jmmL7ya/28/) — Jose Rui Santos, May 10 '16 at 06:42
@EddeAlmeida Yes, all other jQuery methods work as expected. — Joe Morano, May 11 '16 at 02:00
@jfriend00 They should both be pointing to the same object. In any case, neither methods work even by themselves. I only included both to show that I tried multiple methods. — Joe Morano, May 11 '16 at 02:04

score 0 · Answer 1 · answered May 10 '16 at 06:12

0

This is because you are using a id selector to connect the events.

Ids are by definition supposed to be unique. When you use an id jQuery will automatically select the first matching element it finds. To solve this just add a class on the elements and use that selector instead.

answered May 10 '16 at 06:12

Albin

2,912
1
21
31

I made sure the id is unique. And I also tried adding classes and using those names, but nothing happens then either. – Joe Morano May 10 '16 at 06:13
Well the reason for your jsFiddle not working is that it did not include jQuery. – Albin May 10 '16 at 07:02
I'm glad the jsFiddle problem was solved, but the problem on my app remains. – Joe Morano May 11 '16 at 02:06

jQuery "focus" works in one instance but not in others

1 Answers1