Data-target works with td but not with span

1

This works (i.e. the controller is invoked)

<tr id=<%=dom_id(content) %> data-controller="content" >
  <td data-target="content.area"><%= content.text %></td>
  <td><%= content.from_lang%></td>
  <td><%= content.translations.size %> (<%= link_to 'add', new_content_translation_path(content) %>) </td>
  <td><%= link_to 'Show', content %></td>
  <td><%= link_to 'Edit', edit_content_path(content) %></td>
  <td><%= link_to 'Destroy', content, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>

But changing the second line to this causes the controller not to be invoked.

  <span data-target="content.area"<td><%= content.text %></td></span>

Does that make sense?

2

Pitosalas,

I’m guessing, but, having a span as a direct descendant of a tr isn’t valid markup. Therefore, your DOM may be messed up and could be the issue.

See Moz docs for TR

3

It’s generally a good idea to put quotes around attribute values.

You’re missing a closing > on that <span>. And +1 to @adamw’s comment, try putting the <span> inside the <td>.

1 Like
4

I think you’re right because when I examined the DOM through the browser the span didn’t even show up. Solved, thanks!