Make button clickable when using radio button

Question

so I have the following view:

<ion-view view-title="Training Detail">
    <ion-content class="padding">


            <ul class="list">

                <ion-item class="item item-checkbox item-button-right" ng-repeat="exercise in exercises" on-double-tap="sendToChangeExercise" on>
                    <label class="checkbox">
                        <input type="checkbox"  ng-click="didExercise(exercise.exerciseID)" >
                    </label>
                    <p><h2>{{exercise.exerciseName}}</h2></p>
                    <p>{{exercise.repetition}} <b ng-if="exercise.diaryRepetition.length > 0"><i> Eintrag im Trainingstagebuch: {{exercise.diaryRepetition}}</i></b></p>
                    <p>{{exercise.weight}} <b ng-if="exercise.diaryWeight.length > 0"><i> Eintrag im Trainingstagebuch: {{exercise.diaryWeight}}</i></b></p>
                  <button class="button button-positive" onclick="alert('fuuu')">
                    <i class="icon ion-ios-telephone"></i>
                  </button>
                </ion-item>

            </ul>

        <button class="button button-full button-positive" id="finisherButton" disabled="true" >
          {{getButtonString()}}
        </button>

    </ion-content>
</ion-view>

Which works great. I have a radiobutton and wherever I click in this row, the radio button will select/deselect.

But I want to give the user the possibility to change weight and repetition. I want to add a button on the right, where the user can click and change things. However, the button is not clickable. Even if I click on the button, the radio button will select/deselect instead of doing 'button stuff'.

How can I make this row, so that like, the effect of the radio button "stops" right before the button? And the button is clickable?

Thanks for help!

Answer 1

You need to stop propagation from parent click. Put your button like this

<button class="button button-positive" ng-click="alert('fuuu'); $event.stopPropagation();">
   <i class="icon ion-ios-telephone"></i>
</button>

Answer 2

you can try as :

    <ion-view view-title="Training Detail">
    <ion-content class="padding">


            <ul class="list">

                <ion-item class="item item-checkbox item-button-right" ng-repeat="exercise in exercises" on-double-tap="sendToChangeExercise" on>
                    <label class="checkbox">
                        <input type="checkbox"  ng-click="didExercise(exercise.exerciseID)" >
                    </label>
                    <p><h2>{{exercise.exerciseName}}</h2></p>
                    <p>{{exercise.repetition}} <b ng-if="exercise.diaryRepetition.length > 0"><i> Eintrag im Trainingstagebuch: {{exercise.diaryRepetition}}</i></b></p>
                    <p>{{exercise.weight}} <b ng-if="exercise.diaryWeight.length > 0"><i> Eintrag im Trainingstagebuch: {{exercise.diaryWeight}}</i></b></p>
                  <button class="button button-positive clickme" alt="red"> click me
                    <i class="icon ion-ios-telephone"></i>
                  </button>
                        <input type='radio' id ="red" name="hello"/>

                        <button class="button button-positive clickme" alt="green"> click me
                    <i class="icon ion-ios-telephone"></i>
                  </button>
                        <input type='radio' id ="green" name="hello"/>

                        </ion-item>

            </ul>

        <button class="button button-full button-positive" id="finisherButton" disabled="true" >
                 </button>

    </ion-content>
</ion-view>

2: your java script code would be as like.I am using jquery please confirm link: https://jsfiddle.net/gynz82tg/1/ . May be it will help you.

  $(document).ready(function(){
  $('.clickme').click(function(){
       var attr = $(this).attr('alt');

       $('#'+attr).click();
  });

 })