extracting data from html click event

Question

This code tries to extract the value stored in {{this.result}} of the attribute value of the html input element
<input type="radio" value={{this.result}}>

Template.options.events({
  'click .twin-item': (event) => {
    let elem = event.target;
    console.log( elem.value);
  }
});

<template name="options">
  <div class="twin-group js-radioGroup" data-id={{_id}}>
    <ul class="upShift">
      {{#each values}}
        <li>
          <label class="twin-item">
            <input type="radio" value={{this.result}}>
            <span class="radio-label">{{this.label}}</span>
          </label>
        </li>
      {{/each}}
    </ul>
  </div>
</template>

But the browser console is printing 2 lines, the first undefined and the second is the value I want.

How can I just get one print out which is the correct value I want? thx

score 1 · Accepted Answer · edited May 23 '17 at 11:53

Fred,

I believe the reason why is because of event bubbling.

Try this:

Template.options.events({
  'click .twin-item': (event) => {
    event.preventDefault();
    event.stopPropagation();
    let elem = event.target;
    console.log( elem.value);
  }
});

All I added was this event.preventDefault() and event.stopPropagation().

For your application, you might not need the event.preventDefault() you might just need to use the event.stopPropagation() to keep things under control.

You might also try targeting the actual input instead of the label.

extracting data from html click event

1 Answers1