Strange behaviour with jQuery append

1

I’m trying to use Stimulus to add additional email fields to an invite list.

The code looks like this:

import { Controller } from "stimulus"

export default class extends Controller
  addFields: ->
    $('.invite-list').append '<input type="email" name="invite[email][]" id="email" value="" placeholder="Email address" class="form-control">'

And the HTML like this:

<div class="col" data-controller='invites'>
  <a href="#" data-action="invites#addFields">add another</a>
</div>

It appears to work, but the added field immediately disappears after it appears. I am using Turbolinks, but I’m not submitting the form or anything, so I’m not sure why it would be refreshing the screen.

This gif may help explain. I try several times to add the field.

50%20AM

2

You’ll need to cancel the click event to prevent Turbolinks from making a request:

addFields: (event) ->
  event.preventDefault()
  …

Or, use a button instead of a link:

<button data-action="invites#addFields">add another</button>
3

Well, that’s only mildly embarrassing that I didn’t think of that. O_O

Thanks :slight_smile: I’m really digging on how Stimulus works, I keep finding new use cases for it.