Javascript可在href中工作，但不能在JS文件中工作

Question

Hope everyone is fine. Well I have a weird question, something that I'm missing or failing to understand. Hope anyone here can help me out. Well here goes,

Well I have an html page where I've defined a table with a few hard-coded values as below,

<table id='data-table' class='someClass'>
    <thead>
        <tr>
            <th id="name-title">NAME</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd"><th class='c1'>Zachary Quinto</th></tr>
        <tr class="even"><th class='c1'>Penny</th></tr>
        <tr class="odd"><th class='c1'>Glen McGrath</th></tr>
    </tbody>
</table>

Now I have a javascript file in which, somewhere down the code (Using jQuery), I do this,

$('#data-table').click(function() {
    var value = $(this).find("th.c1").text();
    if(value == "Zachary Quinto")
        someFunc.showData('data-table', 1);        
});

And for some reason this doesn't work, it goes over this function and I don't see any change/effect. However, to my amazement, If, when encapsulating my data into tags, it seem to work. (By encapsulating, I mean something like below)

<tr class="odd"><th class='c1'><a href="javascript:someFunc.showData('data-table', 1);">Zachary Quinto</a></th></tr>
<tr class="even"><th class='c1'><a href="javascript:someFunc.showData('data-table', 2);">Penny</a></th></tr>
<tr class="odd"><th class='c1'><a href="javascript:someFunc.showData('data-table', 3);">Glen McGrath</a></th></tr>

Can anyone please help me with this, I'm not really sure what I'm doing wrong in Javascript file which doesn't let me do this. It's kind of weird as I thought both mean the same thing one way or another.

Thanks a lot for your time.

Answer 1

jQuery's text function returns the combined text of all matching elements. In your case, there are three th.c1 matches, so the text() function returns Zachary QuintoPennyGlen McGrath .

You can see this by throwing a breakpoint on your event handler in a debugger.

Answer 2

Because something is wrong with your script.
You should write it as:

"use strict";
$('#data-table').on("click", "th", function(e) {
    e.preventDefault();
    var value = $(this).text();
    if(value == "Zachary Quinto")
        someFunc.showData('data-table', 1);        
});