I have divs created with a #each loop. Each div have a click action and contains a checkbox. I want to prevent the checkbox from triggering the click event of its parent div. I am using Ember.js handlebars.
<script type="text/x-handlebars" data-template-name="conversations">
{{#each conv in model itemController='singleconv'}}
<div class="conversation-content-wrapper" {{action "clickConv" conv preventDefault=false}}>
<div class="history-message-assigned in-progress-closed" style="display:none;"><p><i class="icon-x"></i>Conversation closed</p></div>
<div class="history-message-assigned in-progress-assignation" style="display:none;"><p><i class="icon-assign"></i>Conversation assigned</p></div>
<div class="history-message-assigned in-progress-reopen" style="display:none;"><p><i class="icon-re-opened"></i>Conversation re-opened</p></div>
<div class="conversation-history">
<div class="conversation-time-history">{{{conv.timeAgoElement}}}</div>
<div class="conversation-details">
<span class="unread-numbers"></span>
{{input type='checkbox' checked=conv.isChecked bubbles="false"}}
<span class="conversation-name">{{conv.customer.name}}</span>
<span class="phone-number">{{conv.customer.cellPhoneNumber}}</span>
<p class="conversation-text">{{conv.lastMessage}}</p>
</div>
</div>
</div>
{{/each}}
</script>
What is the most efficient way to do so? I did look onto the bubbles="false" attribute, but either I don't put it at the right place or it isn't made for this case.
Aucun commentaire:
Enregistrer un commentaire