How can I select elements on data-values that have been added dynamically?

Question

I'm coding a calendar based system. It is displayed as a table. One event can occupy several different table cells, and I want to make all cells of a single event highlight on hover. I have done this several times before, but I am facing a new problem.

This time the calendar table, and it's contents, is dynamically generated, because it is a preview of potential conflicting events, when the user tries to save a new event.

I am using a data-value based on existing event-ids, as identifyers, when linking hover styles on elements. I trigger a mouseover and mouseout event, which toggles a "hovered" class on the elements that has the same data-value as the hovered element.

However, when I add the data-value to a table cell dynamically, it doesn't show up in the HTML of the relevant elements, in my chrome inspector. I can still select a relevant element, and check if it has the data-value through a console command line, and it does in fact have the data-value. But the hover styles, and the HTML displayed in the inspector, does not reflect that.

I've made a simplifyed fiddle, where I only have a simple button, adding '1' as a data-value to four of six table cells. Below the dynamic table, is a static table which already has the data-values. Note that the hover style links are not initiated before clicking the button. After clicking the button, the static table has working hover-linking, while the dynamically updated table does not. Well, it works in one way. Hovering elements from the dynamic table, will ssuccessfully link to, and only to the static table. This leads me to believe that it is the CSS-selection of dynamically updated elements with data-value that fails.

Note that the single element with an id, from the dynamic table, reports that the data-value is in fact set on it.

How can I make my dynamic table work, so that hover linking is visible?

HTML:

<button onclick="add_data()">
Add Data (and hover links)
</button>

<table>
<tr>
   <td class="taken"></td>
   <td class="taken" id="random-td"></td>
   <td class="taken"></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td class="taken"></td>
</tr>
</table>

<br/>

<table>
<tr>
   <td class="taken" data-value="1"></td>
   <td class="taken" data-value="1"></td>
   <td class="taken" data-value="1"></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td class="taken" data-value="1"></td>
</tr>
</table>

Javascript:

window.add_data = function(){

    console.log($('#random-td').data('value')); //undefined

    $('.taken').data("value", 1);

  $("td.taken").mouseover(function(){
        var value = $(this).data("value");
        $("td.taken[data-value='1']").toggleClass("hovered");
    });
    $("td.taken").mouseout(function(){
        var value = $(this).data("value");
        $("td.taken[data-value='1']").toggleClass("hovered");
    });

  console.log($('#random-td').data('value')); // 1
}

CSS:

td{
  width: 50px;
  height: 20px;
}

td.taken{
  background-color: #19b4e0;
}

td.taken.hovered, 
td.taken:hover{
    background-color: #75D2EC;
}

http://jsfiddle.net/420ffwL5/4/

You have a misunderstanding about what `.data()` does – so go read up on it in the documentation. — CBroe, Jan 18 '16 at 14:11
You shouldn't use `data` like this, but you can set `data-value` in markup using `.attr('data-value', 1);` — BenG, Jan 18 '16 at 14:15
You're using toggleclass, you don't really need any flags or data-attributes — adeneo, Jan 18 '16 at 14:19
according to the documentation: .data( key, value )Returns: jQuery Description: Store arbitrary data associated with the matched elements. It seems perfectly legit to set a data-value through jquery's .data() function. I did read the documentation before asking the question. Care to elaborate what you think my misunderstanding is @CBroe? — jumps4fun, Jan 18 '16 at 14:22
_“It seems perfectly legit to set a data-value through jquery's .data() function”_ – that’s not what `.data` does – it does not set custom data attributes. — CBroe, Jan 18 '16 at 14:24
@adeneo, what does toggleclass have to do with selecting elements with a specific id? toggleclass is what I perform on the elements i select, not how i select the elements themselves, which is the actual problem I have. — jumps4fun, Jan 18 '16 at 14:25
`.data` does not affect markup, which you are using your `css` for. — BenG, Jan 18 '16 at 14:25
You're adding `data-value=1` to all elements with the class `.taken`, well you're not, because that's not how `data()` works, you probably wanted `attr`, but that's what you're trying to do, but you already have all the elements, they have the class `.taken`, inside the event handler you just need `$(this).toggleClass('hovered')` — adeneo, Jan 18 '16 at 14:29
The last comment there is very helpful, and exactly what I needed to hear, @BG101. According to JQuery documentation, .data does store arbitrary data to matching selected elements. It's not very intuitive that these are not affecting the markup, as for instance .addClass() is. Reading up on documentation didn't really help in this case. The elements still have the data value stored associated with them though. I still wonder how to make the functionality work. — jumps4fun, Jan 18 '16 at 14:31
jQuery's `data` stores the data ***internally***, not in attributes, so it doesn't set any attributes, hence you can't use an attribute selector like `[data-value=1]` to get the elements. If you want to set the data attributes you'd have to use `attr`, also -> http://jsfiddle.net/420ffwL5/5/ — adeneo, Jan 18 '16 at 14:32
@adeneo, yes, of course, but this is an overly simplified example, where I only show a single id. My real events obviously have different id's, and more complex ways of being added to the tables. — jumps4fun, Jan 18 '16 at 14:33
There is enough info for a really good answer here now, if anyone cares to make a summary. I'd do it myself, but I'd rather let you guys have the points you deserve. — jumps4fun, Jan 18 '16 at 14:34

How can I select elements on data-values that have been added dynamically?

0 Answers0