Appending to a table removes the events of its childrens

[ignamartinoli]

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]

fixed with 3fb0888

[ignamartinoli]

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>

[namzug16]

@ignamartinoli The fix has been merged but it has not been released yet, I'd recommend you to put the _hyperscript.js file with the fix directly in your project until the release of the new version

[ignamartinoli]

@namzug16 thanks, I didn't realize the fix wasn't in the release.

Really glad the project revived. It looks really promising