CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Vikram Anand Bhushan
Vikram Anand Bhushan

Reputation: 4896

Remove anchor effect from a button inside a div which is clickable

I have a div which is totally click-able . But now I have added a button clicking on which a popup appears . But the problem which I am facing is that . When I click the info button the popup appears but also the page goes to the referenced page which is added to the outer most div .

My html code is here

<div style="cursor:pointer; background:" onclick="location.href='http://inmotico.com';" class="contenido_anuncio">
    Here if you click any where it will take you to the page
   <div style="font-size:14px;" class="anuncio_priceiimo">
<div style="margin-top: 0px; padding-left: 0px; margin-bottom: 0px;" class="ui-btn-inline">

    <div style="margin-top: 10px;" class="ui-block-a"> <a class="ui-link" style="color: #FF6600;"></a><a style="color: #FF6600;" class="ui-link">¢ 217,277,650.00</a></div>
<div class="ui-block-b">
    <a style="border:none !important;margin:0px 0px 0px 10px;" data-shadow="false" title="info" data-iconpos="notext" data-icon="info" data-role="button" href="#mDialog1" data-enhance="true" class=" ui-link ui-btn ui-icon-info ui-btn-icon-notext ui-corner-all" data-rel="popup" aria-haspopup="true" aria-owns="mDialog1" aria-expanded="false" role="button">INFO</a>
    </div>
</div>
</div>
</div>

Here is a FIddle**

Upvotes: 2

Views: 504

Answers (1)

Gajotres
Gajotres

Reputation: 57309

First you need to learn not to use inline javascript when working with jQuery Mobile, it is a big no no.

Working example: http://jsfiddle.net/Gajotres/NNj2T/

HTML:

<div style="cursor:pointer; background:"  class="contenido_anuncio" >
    Here if you click any where it will take you to the page
    <div style="font-size:14px;" class="anuncio_priceiimo">
        <div style="margin-top: 0px; padding-left: 0px; margin-bottom: 0px;" class="ui-btn-inline">

            <div style="margin-top: 10px;" class="ui-block-a">
                <a class="ui-link" style="color: #FF6600;"></a><a style="color: #FF6600;" class="ui-link">¢ 217,277,650.00</a>
            </div>
            <div class="ui-block-b">
                <a style="border:none !important;margin:0px 0px 0px 10px;" data-shadow="false" title="info" data-iconpos="notext" data-icon="info" data-role="button"  data-enhance="true" class=" ui-link ui-btn ui-icon-info ui-btn-icon-notext ui-corner-all" aria-haspopup="true" aria-owns="mDialog1" aria-expanded="false" role="button" id="info-btn">INFO</a>
            </div>



        </div>
    </div>
    <div data-role="popup" id="mDialog1" data-overlay-theme="a" data-theme="a" data-corners="true" data-dismissible="true">POPUP</div>

</div>

JavaScript:

$(document).on('vclick', '#info-btn',function(event) {
    $('#mDialog1').popup('open');
    event.stopPropagation();
    event.stopImmediatePropagation();
});

$(document).on('vclick', '.contenido_anuncio',function(event) {
    location.href='http://inmotico.com';
    //alert('asdasd');
});

Links:

Learn about event propagation in javascript and jQuery here and here. Basically in this example if you do everything programmatically you don't need to worry about events misfiring.

Upvotes: 2

Related Questions