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），它只允许你点击第一个我认为是85px的td。这太奇怪了。即使我做了

#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代码，只是“if td被点击”仅适用于td的前85px左右，无论td是否长于此值。

Answer 1

尝试编辑CSS以处理溢出：

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

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

JQuery / Javascript - “.click（）”方法不完全正常工作？

1 个答案: