JQuery / Javascript - “.click()”方法不完全有效？

Question

起初我有一个空 div 的表，并使用 Javascript 和 JQuery，我创建了一个作品数组，无论数组中的单词是什么，我都将这些单词放入 td.这是我的html：

<div id="sideBar">
 <table id="sideTable">
        <tr><td id='row0'></td></tr>
        <tr><td id='row1'></td></tr>
        <tr><td id='row2'></td></tr>
        <tr><td id='row3'></td></tr>
        <tr><td id='row4'></td></tr>
        <tr><td id='row5'></td></tr>
        <tr><td id='row6'></td></tr>
        <tr><td id='row7'></td></tr>
        <tr><td id='row8'></td></tr>
    </table>
</div>

还有我的 Javascript 数组，如果是这样的话

var tableHeadings = ['headingOne', 'headingTwo', 'headingThree'];

然后Javascript将#row3隐藏到#row8，三个标题将分别输入到#row0、#row1和#row2。 td 采用行中最长 td 的大小。这部分代码有效！我还有两个 Javascript 函数，一个用于悬停在 td 上，另一个用于单击 td 时。将鼠标悬停在 td 上的那个，Javascript 是这样开始的

$('#sideTable td').hover(

在你点击 td 的地方，Javascript 是这样开始的

$('#sideTable td').click( function() {

问题是当你将鼠标悬停在单词上时，悬停功能是完美的，但是当我去点击td时，即使td的宽度真的很长/td里面有很多信息（说td中的信息太长了td的宽度变成200px），它只允许你点击第一个我认为td的85px。太奇怪了。即使我这样做了

#sideBar td {
    width: 120px;
}

并使每个 td 的宽度为 120px，它仍然只允许我单击 td 的前 85px。悬停是完美的，当我悬停在 td 上的那一刻，无论我悬停在哪里（无论它是否在 td 的前 85px 内），无论 td 有多长，悬停功能都能正常工作并完美执行.然而，由于某种原因，点击功能只允许我点击标题的前 85px 左右。这是为什么呢？

注意：即使我尝试像这样使用 Javascript 设置 td 的宽度

$('td').css('width','200');

它仍然只允许我点击 td 的前 85px。如果我将鼠标悬停在 td 的其余 115px 上，光标甚至不会变为指针。由于某种原因，它无法识别那里有一个 td。

CSS 是这样的

    #sideBar td {
    font-size: 12px;
}

#sideBar {
    position: absolute;
    top: 90px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

另外请注意，我使用的是 I.E8 而不是 CSS3，而且我写了很多 JS，而且非常混乱，所以如果我上传它，这个帖子会被否决。 JS 并不会真正影响 TD 的宽度或任何内容，它只是“如果 td 悬停，则执行所有这些操作，如果 td 是单击，则执行此操作”。问题不在于 JS 代码，而只是“如果点击了 td”仅适用于 td 的前 85px 左右，无论 td 是否长于此。

Answer 1

尝试编辑你的 CSS 来处理溢出：

overflow-wrap: break-word
overflow-x: visible

听起来像是 CSS 问题而不是 jquery 问题。检查元素，看看鼠标是否甚至超过了 td 的整个宽度。