CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
pepepapa82
pepepapa82

Reputation: 167

How to make an anchor with a div inside with a different link

I'm trying to make a card that is all clickable (the class=box) Except for one section that contains buttons which each links to different links that its parent anchor..

I don't find a way to have one link for the card and a different for a section inside.

            <a class="box" href="box-link.html">
             <div class="box-text">
                <span>Some Text here</span>
                <div style="float:right; " ng-click="dosomeotherstuff()">
                   <span class="glyphicon glyphicon-trash"></span>
                </div>
                <div style="float:right; " ng-click="somethignelse()">
                   <span class="glyphicon glyphicon-share"></span>
                </div>
             </div>
            </a>

I'm using Angular, hence the ng-clicks.

Any ideas on how to sort this out?

Adding a fiddle example: http://jsfiddle.net/pepepapa82/svwLh6w1/

Upvotes: 0

Views: 782

Answers (1)

Michael Robinson
Michael Robinson

Reputation: 29498

You can add more than one action to an ng-click. In this case, you might want to first prevent the click event propogating, then trigger your sub-action:

        <a class="box" href="box-link.html">
         <div class="box-text">
            <span>Some Text here</span>
            <div style="float:right; " ng-click="$event.stopPropagation(); dosomeotherstuff()">
               <span class="glyphicon glyphicon-trash"></span>
            </div>
            <div style="float:right; " ng-click="$event.stopPropagation(); somethignelse()">
               <span class="glyphicon glyphicon-share"></span>
            </div>
         </div>
        </a>

As an alternative, you could pass $event as the first argument of your functions, and stop propogation there. This is, IMHO, cleaner.

Upvotes: 1

Related Questions