CODEWITHSUNDEEP
jquery
Ayman Hussein
Ayman Hussein

Reputation: 3857

onclick on span using jquery

I have the following HTML:

<a title="Prev" data-event="click" data-handler="prev" class="ui-datepicker-prev ui-corner-all">
       <span class="ui-icon ui-icon-circle-triangle-w">Prev</span>
   </a>

I need to change 'Prev' once click on span using jquery.

This is my code:

$(".ui-icon.ui-icon-circle-triangle-w").click(function(){ 
    $(".ui-icon.ui-icon-circle-triangle-w").html('«');         
});

But it does not work, why?

Upvotes: 4

Views: 44043

Answers (3)

Syed Ali
Syed Ali

Reputation: 161

$(".ui-icon .ui-icon-circle-triangle-w").click(function(){ 
    $(this).html('«');         
});

Upvotes: 0

Munchies
Munchies

Reputation: 444

Give your <span> a class:

<a title="Prev" data-event="click" data-handler="prev" class="ui-datepicker-prev ui-corner-all">
       <span class="prevSpan ui-icon ui-icon-circle-triangle-w">Prev</span></a>

and then use it via jQuery:

$(".prevSpan").text("«");

You need a eventhandler for the click event, use .on()
finally the code:

$(document).ready(function(){
  $('.prevSpan').on('click',function(){
    $(".prevSpan").text("«");
  });
});

Documentation for the .on() eventhandler http://api.jquery.com/on/

Upvotes: 4

Magus
Magus

Reputation: 15104

Maybe your code is executed too early. And your html element just doesn't exist when your code is executed. So $(".ui-icon.ui-icon-circle-triangle-w") is just empty.

You can use this :

$("body").on('click', ".ui-icon.ui-icon-circle-triangle-w", function(){ 
    $(this).html('«');         
});

Upvotes: 9

Related Questions