我正在使用 jQuery append 方法附加按钮。
$('#btnContainer').on('click', '.btn', function(){
var test = $('<input>', {
type: 'button', // Set type of input element
class: 'btn', // Applies class btn
value: 'Button', //sets value of Button
click: function () { }
});
$("#btnContainer").append(test);
});
无法理解第一个按钮右侧的空间在附加后比其他按钮更多。
我也没有应用任何其他 css。 (有关更多信息，请参见图片)
代码: http://jsfiddle.net/ajaypatel_aj/XCsNu/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.btn{
color: #000000;
font-size: 11px;
line-height: 1.2;![enter image description here][2]
white-space:nowrap;
}
</style>
</head>
<body>
<div id="btnContainer">
<input type="button" class="btn" value="Button" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript" type="application/javascript">
$('#btnContainer').on('click', '.btn', function(){
var test = $('<input/>', {
type: 'button', // Set type of input element
class: 'btn', // Applies class btn
value: 'Button', //sets value of Button
click: function () { }
});
$("#btnContainer").append(test);
});
</script>
</body>
</html>
最佳答案
修改此html
<div id="btnContainer">
<input type="button" class="btn" value="Button" />
</div>
到
<div id="btnContainer"><input type="button" class="btn" value="Button" /></div>
div 中的空格导致了这个问题。 演示:http://jsfiddle.net/XCsNu/2/
关于jQuery 按钮追加空格问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24060570/