CODEWITHSUNDEEP
jqueryjquery-mobile
spiderman
spiderman

Reputation: 1417

how to bind different event to an element inside anchor tag using jquery

i m using star rating plugin in jquery mobile to rate my docs my code is like this

<li>
    <a href="#" class="page3-links">
        <img src="images/pdf.png">
            <h2>Books1</h2>
                <input name="star1" type="radio" class="star"/>
                <input name="star1" type="radio" class="star"/>
        <input name="star1" type="radio" class="star"/>
        <input name="star1" type="radio" class="star"/>
        <input name="star1" type="radio" class="star"/>
     </a>
</li>

my problem is i want to make click on input but my anchor tag event is triggered whenever i clicks on the input and if i puts input out of anchor jquery mobiles formatting change and it looks very ugly what should i do

i try like this

$('document').ready(function()
{
    $('.page3-links').click(function(){alert("hasdasi");});
    $('.page3-links input').unbind('click');
});

thank for your precious time

Upvotes: 1

Views: 711

Answers (2)

ShankarSangoli
ShankarSangoli

Reputation: 69915

You can avoid this by stopping the event propagation from input element. Try this

$('document').ready(function()
{
    $('.page3-links').click(function(){alert("hasdasi");});
    $('.page3-links input').click(function(e){
       e.stopPropagation();
    });
});

Upvotes: 1

JaredPar
JaredPar

Reputation: 755259

To prevent the anchor from being followed you need to call preventDefault on the event variable. 

$('.page3-links').click(function(e){
  e.preventDefault();
  alert("hasdasi");
});

Upvotes: 0

Related Questions