奇怪的jquery html行为

时间:2017-10-17 06:10:28

标签: jquery html

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

当用户单击td中的链接时,单元格中的数据应从“Some Original Text”更改为“Some Text”。在浏览器窗口中它不会改变。但是,警报会显示单元格中的新数据。有什么想法在这里发生吗?

3 个答案:

答案 0 :(得分:2)

尝试

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

答案 1 :(得分: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>

答案 2 :(得分:0)

我认为当您点击 td 时,也会点击 a 标记,因此您必须使用 e.preventDefault()用于防止页面再次加载的功能。

所以代码可以像这样编写

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

HTML应包含正确的table和tr标记。

例如

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

检查工作 fiddle here