Question

我在编程方面相当新，所以我的问题可能很容易回答甚至是愚蠢的，但我在这里：

在我的网站中添加新按钮（或任何元素）时，此按钮不会以正确的方式显示。我究竟做错了什么？

代码：

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<script>
$(function() {
$( "#accordion" ).accordion();
});

 $(function() {
$( "button" )
.button()
.click(function() {
$('#panel').append("<button>OK?</button>");
});
});
</script>

</head>
  <body>
    <button>Go!</button>
    <div id="accordion">
       <h3>Heading 1</h3>
        <div>
          <p id="panel">
        Text
          </p>
        </div>                  
    </div>
   </body>
</html>

Answer 1

在添加按钮确定后尝试此代码：

 $('#panel').append("<button>OK?</button>");
 $( "#panel button" ).button();

Answer 2

我测试了你的问题。两种不同按钮样式的原因是行

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

导入jquery-ui.css样式的位置。这实际上取决于按钮在页面中的位置，并以不同的方式对它们进行样式化。当第二个按钮（＆＃39; OK？＆＃39;）正在使用面板时，它会收到不同的风格。

你可以尝试上面注释掉的那一行 - 它仍然可以工作（没有样式），两个按钮看起来完全一样。

所以这真的是不是jQuery问题，而只是 CSS 样式的问题。如果您想深入了解这一点，我建议您在 Chrome JS控制台或 Firefox Firebug 中查看您的页面。两者都会告诉您为什么页面上的每个元素都与它完全一样，即它们会告诉您按钮样式是来自jquery-ui.css还是style.css。

请注意，我显然无法访问 /resources/demos/style.css ，因此我删除了该行以进行测试。我的另一个建议是检查您为竞争样式定义导入的两种样式，例如：一种风格说按钮的样式应该是这样的，而另一种则说不同的东西。

Answer 3

这可能不是正确的解决方案，但我可以提出一个解决方法。检查他们添加到“Go”按钮的类jquery，并在附加“确定”按钮时，将这些类添加到“确定”按钮

像这样。

$('#panel').append("<button class="jquery ui theme button classes">OK?</button>");

如何插入一个新元素，以便以正确的方式显示（使用jQuery）

3 个答案: