Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Appending to a table removes the events of its childrens #555

Closed
ignamartinoli opened this issue Jul 25, 2024 · 2 comments
Closed

Appending to a table removes the events of its childrens #555

ignamartinoli opened this issue Jul 25, 2024 · 2 comments

Comments

@ignamartinoli
Copy link

ignamartinoli commented Jul 25, 2024

With this dynamic table example:

<table>
	<thead>
		<tr>
			<th>Column 1</th>
			<th>Column 2</th>
			<th>Actions</th>
		</tr>
	</thead>
	<tbody id="table">
		<tr>
			<td><input type="text" /></td>
			<td><input type="text" /></td>
			<td><button _="on click remove closest <tr />">Remove</button></td>
		</tr>
	</tbody>
</table>
<button _="on click append `
	<tr>
		<td><input type='text' /></td>
		<td><input type='text' /></td>
		<td><button _='on click remove closest <tr />'>Remove</button></td>
	</tr>
` to #table">Add row</button>

The on click remove closest <tr /> handler works, until a row is added. Then only the append command will work, but disabling the remove command.

@1cg
Copy link
Contributor

1cg commented Dec 13, 2024

fixed with 3fb0888

@1cg 1cg closed this as completed Dec 13, 2024
@ignamartinoli
Copy link
Author

ignamartinoli commented Dec 14, 2024

Hi. I tried the snippet again, and it didn't work as expected. This is an alternate version that you can try

    <script type="text/hyperscript">
      def row()
        return "
          <tr>
            <td><input type='text' /></td>
            <td><input type='text' /></td>
            <td>
              <button _='on click remove the closest <tr />'>Remove</button>
            </td>
          </tr>
        "
      end
    </script>

    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody id="table" _="init append row() to me"></tbody>
    </table>
    <button _="on click append row() to #table">Add row</button>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants