This is my HTML code:

<div id="trashico">
    <img class="deskico" src="images/trashico.png"/>
    <p><span class="caption">Trash</span></p>
</div>

Here I want to use jQuery to change the text of the span when I click on the div. So what jQuery should I have to write?

This is my HTML code:

<div id="trashico">
    <img class="deskico" src="images/trashico.png"/>
    <p><span class="caption">Trash</span></p>
</div>

Here I want to use jQuery to change the text of the span when I click on the div. So what jQuery should I have to write?

• javascript
• jquery
• html

• If you want it in jQuery why tag as php? – Epodax Commented Jul 28, 2015 at 11:28
• You want to rename the name or the text? – actaram Commented Jul 28, 2015 at 11:28
• Have you tried something? – carloabelli Commented Jul 28, 2015 at 11:29
• You need to write a click event handler which will change the contents of the span – Arun P Johny Commented Jul 28, 2015 at 11:29
• 1 I think making the field content-editable will be what OP wants. It can then be ajaxed to the server – mplungjan Commented Jul 28, 2015 at 12:38

5 Answers 5

You can do like this

$('#trashico').click(function(){
   $(this).find('span').text('your text');
});

You can change the text of the span on the click event -

$('#trashico').on('click', function() {
    $(this).find('span').text('new text');
})

Fiddle

write the folowing click event

$('#trashico').click(function(){
   $('.caption').text('What ever new name you want');
})

Update answer

As for what you try to achieve is sort of the windows F2 functionality. Try the following logic. You would have to implement it using the base idea I've given.

$('#trashico').click(function(){
    $(this).addClass('active'); //Add a seperate class to identify on what is clicked
})

$(document).keyup(function(e){
   if(e.keycode == 113 && $('.active').length > 0){
      $('.caption').text('change name');
   }
})

The above code will add a class to the clicked icon on your page. Sort of selected folder on windows. Then there is a keyup event bound to the document where it'll listen to what keys are pressed. when it hits 113 ( is the keycode for F2 ) then the if condition would be true and you would be able to change the name.

This is the basic logic of the OS renaming function. You would have to go through this base to achieve your requirement.

Try the following solution. Here we are changing the text of span tag with class caption:

$("#trashico").click(function(){
   $(this).find(".caption").text('New Text') }
});

$('#trashico').click(function() {
  $('#trashico > p > span').text("changed text");

});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="trashico">
  <img class="deskico" src="images/trashico.png" />
  <p><span class="caption">Trash</span>
  </p>
</div>