CODEWITHSUNDEEP
jqueryhtml
bart2puck
bart2puck

Reputation: 2522

Odd jquery html behavior

$('.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?

Upvotes: 1

Views: 54

Answers (3)

Suhail Akhtar
Suhail Akhtar

Reputation: 2023

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.

Upvotes: 0

Eshu
Eshu

Reputation: 185

<!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>

Upvotes: 0

Sebastian Kaczmarek
Sebastian Kaczmarek

Reputation: 8515

Try

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

Upvotes: 2

Related Questions