Odd jquery html behavior

Question

$('.editTime').click(function(){
            var thisId = $(this).closest('td').attr('id');
            alert($('#'+thisId).html());
            $('#'+thisId).html("Some Text");
            alert($('#'+thisId).html());
    });


 <td class='editTime' id='someId'><a href='#'>Some Original Text</a></td>

When a user clicks the link in the td, the data in the cell should change from "Some Original Text" to "Some Text". In the browser window it does not change. The alerts however do show the new data in the cell. Any idea whats going on here?

use $(this).attr('id'); with $('#'+thisId).find('a').html("Some Text"); — guradio
– guradio, Commented Oct 17, 2017 at 6:11
$('.editTime').click(function(){ ... but your <a> is not $('.editTime'), that's your <td> :/ so it's not the jQuery which is odd, it just you're being not careful — Taufik Nur Rahmanda
– Taufik Nur Rahmanda, Commented Oct 17, 2017 at 6:35

Sebastian Kaczmarek · Accepted Answer · 2017-10-17 06:16:48Z

2

Try

$('.editTime').click(function(){
    $(this).find('a').text("Some Text");
});

answered Oct 17, 2017 at 6:16

Sebastian Kaczmarek

8,5254 gold badges25 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eshu · Accepted Answer · 2017-10-17 06:19:14Z

0

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Theme Simply Me</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#someId').on('click', function () {
                $('#someId a').text('Some Text');
            });
        });
    </script>
</head>
<body>
    <table>
        <tr><td class='editTime' id='someId'><a href='#'>Some Original Text</a></td></tr>
    </table>
</body>
</html>

answered Oct 17, 2017 at 6:19

Eshu

1856 bronze badges

Comments

Suhail Akhtar · Accepted Answer · 2017-10-17 06:33:10Z

0

I think that when you click on the td, a tag is also being clicked so you have to use e.preventDefault() function to prevent the page to load again.

So the code can be written like this

$('.editTime').click(function(e){
 e.preventDefault();
 $(this).find('a').html('Some text')
})

HTML should contain proper table and tr tags.

For example

<table>
  <tr>
    <td class='editTime' id='someId'><a href='#'>Some Original Text</a></td>
  </tr>
</table>

Check the working fiddle here.

answered Oct 17, 2017 at 6:33

Suhail Akhtar

2,07320 silver badges32 bronze badges

Collectives™ on Stack Overflow

Odd jquery html behavior

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related