Jquery追加按钮显示不正确

Jquery Appended Button Not Displaying Correctly

本文关键字：不正确 显示 按钮 追加 Jquery      更新时间：2023-09-26

我正在使用Jquery/javascript/html。我试图在我的表中显示标签内的按钮。我将信息附加到/到我的html页面上的一个部分。代码如下:

<html>
<body>
    <p id="report_area"></p>
</body>
</html>

Javascript文件

$('#report_area').append('<table>'); 
$('#report_area').append('<tr>'); 
$('#report_area').append('<th>' + view + '</th><th>' + col_1 + '</th><th>' + col_2 + '</th><th>' + col_3 + '</th>');
$('#report_area').append('</tr>');
var btn=$('<button/>');
btn.text('View');
btn.val=item.SURVEY_JOB_ID;
btn.id=item.SURVEY_JOB_ID;
// recently added code - start
btn.click(function()
    {
      window.localStorage.setItem("MyFirstItem", 10);
      window.location = 'GoToThisOtherPage.htm'
    }
// recently added code - end
$('#report_area').append('<tr><td>'+ btn +'</td><td>' + item.JOB_NUMBER + 
'</td><td>' + item.TITLE + '</td><td>' + item.MODIFICATION_NUMBER + '</td></tr>');
$('#report_area').append('</table>');

这似乎工作正确，然而，按钮没有正确显示。它以物体的形式出现。所有其他数据显示正确。我的表行显示为:

[object object] 12 New Job Title 0

[object object} 30 Title Help Me 1

我不知道为什么它显示为[object object]。当我做一些简单的事情，如:

$('#report_area').append(btn);

按钮在页面上正确显示。对此任何帮助都将不胜感激。

要理解为什么这不起作用，您必须查看append的文档。

类型:htmlString或Element或Array或jQuery

append能够排除这些类型中的任何一种，并以不同的方式处理它们，所以当你传递给它一个元素(实际上是jQuery集合)时，它能够智能地将其转换为所需的html。

然而，在您的例子中，您传递给它一个字符串，因此它将天真地将字符串视为html。这产生[object Object]的原因是因为它依赖于原生JavaScript将元素转换为字符串。您将使用console.log(btn)生成相同的输出。

// append recieves a jQuery collection, calls appropriate methods to obtain html
$('#report_area').append(btn);
// append receives a string, blindly assumes that it is already the desired html
$('#report_area').append(btn + '');

解决方案1—单独追加

从你对其他答案的评论来看，这个解决方案似乎行不通。我认为这是因为append在追加时将自动添加tr和td的关闭标签，导致随后添加按钮。您可以通过查看浏览器开发工具中生成的html来检查是否存在这种情况。

$('#report_area').append('<tr><td>', [btn, '</tr></td>'])

解决方案2 -正确转换为字符串

$('#report_area').append('<tr><td>'+ btn[0].outerHTML +'</td><td>')

解决方案3 -构建jQuery集合

我认为你一直在做的主要问题是与混合元素和字符串。我已经编写了一个工作jsfiddle解决方案，将所有内容构建为jQuery集合。

var table = $('<table>');
var btnRow = $('<tr>');
var btnCell = $('<td>');
var btn=$('<button>');
btn.text('View');
btn.val('val');
btn.attr('id', 'id');
btn.on('click', function()
    {
      window.alert('Click');
    });
btnCell.append(btn);
btnRow.append(btnCell);
table.append(btnRow); 
btnRow.append('<td>1</td><td>2</td><td>3</td>');
$('#report_area').append(table);

JavaScript正在将btn转换为字符串，因为您正在将多个字符串连接到它。

如果你这样做，它应该工作。

$('#report_area').append('<tr><td>');
$('#report_area').append(btn);
$('#report_area').append('</td><td>' + item.JOB_NUMBER + 
'</td><td>' + item.TITLE + '</td><td>' + item.MODIFICATION_NUMBER + '</td></tr>');
$('#report_area').append('</table>');

您正在尝试在jQuery对象上设置本机DOM属性。记住，jQuery对象是原生DOM对象的超集。修改代码以使用.val()和.attr() jQuery方法，如下所示:

var btn=$('<button/>');
btn.text('View');
btn.val(item.SURVEY_JOB_ID);
btn.attr('id', item.SURVEY_JOB_ID);
或者，为了方便起见，您可以将这些方法链接在一起: 
var btn= $('<button/>')
    .text('View')
    .attr('id', item.SURVEY_JOB_ID)
    .val(item.SURVEY_JOB_ID);

最后，更改.append()方法的用法，以便像这样附加内容:

$('#report_area').append(
    '<tr><td>',
    [
        btn,
        '</td><td>' + item.JOB_NUMBER + '</td><td>' + item.TITLE + '</td><td>' + item.MODIFICATION_NUMBER + '</td></tr></table>'
    ]);
相关文章：