Title: JQuery / Javascript - ".click()" method not entirely working?
Tags: javascript;jquery;css;html-table
Question: I have a table with empty divs at first and with Javascript and JQuery, I created an array of works and whatever words are in the Array, I put those words into the td. Here is my html:

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

and my Javascript array, if it were this

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

then the Javascript will hide #row3 till #row8 and the three headings will be inputted into #row0, #row1 and #row2 respectively. The td's take the size of the longest td in the row. This part of the code works! I also have two Javascript functions, one for hovering over the td and the other for when you click the td. The one where you hover over the td, the Javascript starts like this

```$('#sideTable td').hover(
```

and the one where you click the td, the Javascript begins like this

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

The problem is that when you hover over the word, the hover function is perfect, but when I go to click the td, even if the width of the td is really long / there is a lot of information inside the td (say the information in the td is so long that the width of the td becomes 200px), it only allows you to click the first I think 85px of the td. It's so weird. Even if I do

```#sideBar td {
    width: 120px;
}
```

and make the width of every td 120px, it still would only allow me to click the first 85px of the td. The hovering is perfect, the moment I hover over a td, regardless of where I hover (regardless of if it is inside the first 85px of the td or not) and regardless of how long the td is, the hover function works and executes perfectly. However, for some reason, the click function only allows me to click inside the first 85px or so of the heading. Why is this?

Note: Even if I try setting the width of the td using Javascript like so

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

it still only allows me to click in the first 85px of the td. If I hover over the rest 115px of the td, the cursor won't even change to a pointer. It doesn't recorgnize for some reason that there is a td there.

The CSS is this

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

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

Also note that I am using I.E8 and not CSS3 and that there is A lot of JS which I wrote and it is quite messy so if I uploaded it, this thread would get downvoted. The JS doesn't really effect the width or anything of the TD though, it is just "if td is hovered then do all of this and if td is click, do this". The problem isn't with the JS code, it's just that the "if td is clicked" only works for the first 85px or so of the td regardless of if the td is longer than that.

Comment: You should provide more information. CSS and JS. When it comes to diagnosis, looking at the code helps more than reading a novel of expected and experienced behaviour IMHO.

Comment: @kraxor I uploaded the CSS, there is A lot of JS and it is quite messy so if I uploaded it, this thread would get downvoted. The JS doesn't really effect the width or anything of the TD, it is just "if td is hovered then do all of this and if td is click, do this". Also, I use I.E8 and not CSS3, if that makes a difference.

Comment: @ᾠῗᵲᄐᶌ hm I can't view the JS filled at work for some reason, I will look at it whe I get home.. Is there a way to patch this issue rather than solve it? For example, is there a way to tell Javascript that everything in a td + 20px to the right of the td is should be clickable?

Comment: @user2719875 I've fiddle with ᾠῗᵲᄐᶌ's code some, and I still don't see anything wrong. Some of your other code is probably messing with it and causing this problem. See [Updated Fiddle](http://jsfiddle.net/tewathia/T2Hxx/2/)

Comment: Like kraxor said, we need more information but my guess is that there is something overlapping the tds so when you click, the event is not reaching the tds. Will need to see more to confirm.

Comment: seems to work fine here http://jsfiddle.net/T2Hxx/


Here is another answer: Try editing your CSS to handle overflow:

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

Sounds like a CSS thing not a jquery problem. Inspect the elements and see if the mouse even makes it over the whole width of the td.

Comment for this answer: What is that the CSS for? #sideBar or #sideBar td or #sideBar tr? And yes i'm pretty sure it isn't a JS problem. My JS is basically just "if the td is hovered, do all of this, if it is clicked, do all of this". And oh man, also, is that CSS3? I am not using CSS3. It is for a company and the company doesn't use CSS3 and is still only using I.E 8.
Comment for this answer: hm no that still doesn't work, even with the scroll, it still gives the same problem.
Comment for this answer: So 'overflow' and 'overflow-wrap' should be okay no matter the browser. Try this - if in Chrome right click the tr tag and hit inspect element. Then go to the source and hover over the td tag it'll show you when and where its being cut off. So your CSS would reflect this, use the overflow property to help. http://www.w3schools.com/cssref/pr_pos_overflow.asp

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 6, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2013:00:10/31/13', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<javascript><jquery><css><html-table>', 'Title': 'JQuery / Javascript - ".click()" method not entirely working?', 'ViewCount': 174, 'id': 19714622, 'user_AboutMe': '', 'user_AccountId': 3222898.0, 'user_DisplayName': 'SilentDev', 'user_Reputation': 18779.0, 'user_Views': 823.0, 'user_id': 2719875.0}}