Mystery of the trailing slash on input (disappeared!) jquery

Question

I've a very peculiar problem, and I cannot get hold of it. Trailing slash on my input elements disappeared, though I'm sure (double checked) php does contain them. Something happens when jquery appends this data to html tree.

Problem can be seen here: http://gamoicani.es/logo/ if you click on logo and see input html, you will see that there is no trailing slash at the end.

But in php I've this:

<input type="text" name="guesslogo" data-lang="<?php echo $row['logo_lang']; ?>" />

I even tried <input></input> but result is the same.

I also disabled knob and kbd jquery plugins on these inputs but something is not right and it simply doesn't work.

I checked my ajax call:

function create_views(level) {
        $.ajax({
            url: "actions.php",
            type: "GET",
            data: "show_level=" + level,
            cache: false,
            success: function (data){
                views[level] = '<li data-level="' + level + '">' + data + '</li>';

                //Count completed tasks
                completed_calls++;

                //if last level is loaded-called append and activate slider
                if (levels == completed_calls) {
                    //append views to container
                    console.dir($(".slides_container").append(views.join(' ')));
                    //activate slider
                    unislider = $(".slides_container").dpUniSlider({
                        //loop: false,
                        draggable: false
                    });
                    //Activate Georgian keyboard for some logos
                    $("input[data-lang=ge]").GeoKBD();

                    //Activate progress bar
                    update_level_progress_bar();
                }
            }
        });
}

Did console.dir on views and / is there! So it must be during append something goes wrong... I'm running out of ideas to check...

Why do I care about trailing slash?

on.keypress only works for first input in html

//check answer on ENTER keyboard press
$("body").on("keypress", "input:text[name=guesslogo]", function(e){
    if (e.keyCode == 13) {  
        $(this).siblings(".check").trigger("click");
    }
});

This doesn't work correctly!

Any help appreciated!

Why do care about a trailing slash? Are you looking at your DOM with Firebug or Developer Tools or something? You do know they don't show the self-closing `/`, right? If it's in your HTML, it won't show up in the DOM representation by the browser — Ian, Apr 17 '13 at 15:13
You don't need to close `` tags. Their content model is "empty". Self-closing tags are meaningless in HTML anyway. — Pointy, Apr 17 '13 at 15:13
@Ian I care because of this issue: http://stackoverflow.com/questions/16062255/on-keypress-only-works-for-first-input-in-html — , Apr 17 '13 at 15:16
@epascarello I updated OP, can you check it? reason is in the end. — , Apr 17 '13 at 15:17
@SandroDzneladze What do you mean by "if you click on logo and see input html"? What are you doing to "see input html"? — Ian, Apr 17 '13 at 15:20
@SandroDzneladze And by the way, use `e.which`, not `e.keyCode`. jQuery normalizes the key code of the event into `which`. — Ian, Apr 17 '13 at 15:22
@epascarello What fails/works? Pressing enter in the textbox? — Ian, Apr 17 '13 at 15:28
@SandroDzneladze Also, is there a reason you're using `keypress` and not `keydown`? — Ian, Apr 17 '13 at 15:33
@Ian, yes an enter key in the textbox on the second icon will fail. — epascarello, Apr 17 '13 at 15:36
@epascarello Woah, it was just working for me I thought. It works for me for all of the icons **except** the second one (the purple one). — Ian, Apr 17 '13 at 15:38

score 2 · Accepted Answer · answered Apr 17 '13 at 15:31

2

As mentioned before, it has nothing to do with the slash.

Change the code to use document instead of body with keydown

$(document).on("keydown","input[name='guesslogo']",function(e){
    if (e.keyCode == 13) {  
        $(this).siblings(".check").trigger("click");
    }
});

Your code will work with this change.

answered Apr 17 '13 at 15:31

epascarello

204,599
20
195
236

(helping your argument, although I don't understand why `document` would be different from `"body"`) From the jQuery docs for `keypress` - "If key presses anywhere need to be caught (for example, to implement global shortcut keys on a page), it is useful to attach this behavior to the `document` object. Because of event bubbling, all key presses will make their way up the DOM to the `document` object unless explicitly stopped." – Ian Apr 17 '13 at 15:42
+1 though this might be worth moving to the original question :) Also worth noting that this should probably be done with classes rather than with names. – Ben McCormick Apr 17 '13 at 15:42
1

Did body-> document fixed the issue or, keydown? most importantly, why? :) it works perfectly though... – Apr 17 '13 at 18:05
Do you know what the difference is between `document` and `"body"` here? Shouldn't the event just as regularly pass through `` as it does it `document`? – Ian Apr 17 '13 at 18:50
With body one of the children elements or itself needs focus for it to reliably capture the event. Looks like something is causing a blur to happen so it is not being focused. I did not spend the time to really track down the root cause, just know basic fixes. – epascarello Apr 17 '13 at 18:59

Ben McCormick · Answer 2 · 2013-04-17T15:19:03.773

1

You don't need to have closing slashes on input tags. They don't contain items within them and are represented as a single tag.

This:

I even tried <input></input> but result is the same.

is actually completely incorrect. There's never a closing tag for input

On another note, jQuery doesn't append exactly what you post, it parses it and then adds it as semantically correct HTML.

For instance $().append will append the same thing for "<div>", "<div/>", and "<div></div>"

Also tools like Chrome dev tools will show the input without the / even if you type it explicitly into source.

Try inspecting the input here: http://jsfiddle.net/f7USH/ and you'll see that the element is added as an input with a slash but appears without it in devtools.

edited Apr 17 '13 at 15:19

answered Apr 17 '13 at 15:14

Ben McCormick

25,260
12
52
71

This problem is related to this: http://stackoverflow.com/questions/16062255/on-keypress-only-works-for-first-input-in-html if I don't have trailing slash at the end of input keypress doesn't work. – Apr 17 '13 at 15:16
uh, in the solution given back to you for the answer to that question the inputs do not have trailing slashes : http://jsfiddle.net/YeFVt/ I don't see anyone who suggested that you need slashes. – Ben McCormick Apr 17 '13 at 15:23
I did. This came from the DOM being changed and the solution magically working, so it was more of a case of that. – Chris Dixon Apr 17 '13 at 15:26
Both Firebug and Chrome Developer Tools don't show the `/` for self-closing elements. IE Developer Tools does though – Ian Apr 17 '13 at 15:26

score 1 · Answer 3 · edited May 23 '17 at 12:25

1

Self-closing tag syntax, in modern HTML, is just syntactic sugar for people addicted to XML.

When you use a DOM viewer to look at a document, you see a serialisation of the DOM to HTML (not the original source code).

Since the slash is entirely optional, your viewer doesn't render it.

Why do I care about trailing slash?

That code not working has nothing to do with the trailing slash.

edited May 23 '17 at 12:25

Community

1
1

answered Apr 17 '13 at 15:35

Quentin

914,110
126
1,211
1,335

IE Developer Tools renders it. Actually, it seems to render a `/` for any element without any inner content, even `div`s or `textarea`s – Ian Apr 17 '13 at 15:36
The viewer being used by the OP ("your viewer") does not. – Quentin Apr 17 '13 at 15:38
I wasn't trying to argue against anything, I was just adding information. ben336 already pointed out this Developer Tools behavior anyways, and I provided the same comment – Ian Apr 17 '13 at 15:40

Mystery of the trailing slash on input (disappeared!) jquery

3 Answers3