Element exists but .html() doesn't work

Question

When triggered $(this).length returns 1 yet $(this).html() causes an error. Here is the code:

$("#inputPad > .row > div > span").click(() => {
    console.log("triggered click");
    console.log("$(this).length: " + $(this).length);
    console.log("$(this).prop(id): " + $(this).prop("id"));
    console.log("$(this): " + $(this));
    console.log("$(this).html(): " + $(this).html());
});

And here are the outputs when triggered:

And here is the HTML:

<div id="inputPad" class="col s6 offset-s3 z-depth-2">
    <h4>Input Pad</h4>
    <hr>
    <div class="row">
        <div class="col s1 offset-s2"><span id="inpPad00">\sqrt{x}</span></div>
        <div class="col s1"><span id="inpPad01">\sqrt{x}</span></div>
        <div class="col s1"><span id="inpPad02">\sqrt{x}</span></div>
        <div class="col s1"><span id="inpPad03">\sqrt{x}</span></div>
        <div class="col s1"><span id="inpPad04">\sqrt{x}</span></div>
        <div class="col s1"><span id="inpPad05">\sqrt{x}</span></div>
        <div class="col s1"><span id="inpPad06">\sqrt{x}</span></div>
        <div class="col s1"><span id="inpPad07">\sqrt{x}</span></div>
    </div>
    <div class="row">
        <div class="col s1 offset-s2"><span id="inpPad10">\sqrt{x}</span></div>
        <div class="col s1"><span id="inpPad11">\sqrt{x}</span></div>
        <div class="col s1"><span id="inpPad12">\sqrt{x}</span></div>
        <div class="col s1"><span id="inpPad13">\sqrt{x}</span></div>
        <div class="col s1"><span id="inpPad14">\sqrt{x}</span></div>
        <div class="col s1"><span id="inpPad15">\sqrt{x}</span></div>
        <div class="col s1"><span id="inpPad16">\sqrt{x}</span></div>
        <div class="col s1"><span id="inpPad17">\sqrt{x}</span></div>
    </div>
</div>

@ChinLeung I am certain, when I remove $(this).html() the code runs fine. — Jonathan Woollett-light, Nov 14 '17 at 22:30
@Barmar What an utterly stupid reason for jQuery to break, but thank you I don't think I would have found the answer otherwise. — Jonathan Woollett-light, Nov 14 '17 at 22:32
@Barmar why would it only break on the `$(this).html();` though? — Chin Leung, Nov 14 '17 at 22:32
Because whatever `this` is, `$(this).html()` doesn't work, but the other functions do. What does `console.log(this)` show? — Barmar, Nov 14 '17 at 22:36
@JonathanWoollett-light with the arrow function, `this` will be the global object window. See for yourself: https://jsfiddle.net/37go6e9n/ — JJJ, Nov 14 '17 at 22:37
@JonathanWoollett-light this should help you understand arrow functions better: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions — JJJ, Nov 14 '17 at 22:38

Element exists but .html() doesn't work

0 Answers0