jquery ui按钮适用于一个元素，不适用于其他元素

Question

我正在使用 jQuery UI 按钮来制作答案表单:http://sarkelliancreed.comule.com/learn/html/3

第一组按钮起作用，位于包含 HTML 的框下方。但是，如果用户单击第一个按钮，则下一组按钮(单选按钮)不会使用 jQuery UI 进行样式设置。在控制台上它说，$(...).button() 不是一个函数。为什么 .button() 适用于一个元素，但不适用于另一个元素？

HTML:

<p> Take a look at this code and see if you can figure out what it does. </p>
<pre>

&lt;!doctype html&gt;
 &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt; Sample Page &lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;h1&gt; Sample Text &lt;/h1&gt;
  &lt;/body&gt;
 &lt;/html&gt;


</pre>

<div id="options">
    <input type="radio" id="opt-one" name="radio" class="option"><label for="opt-one">Yes, I know what this does!</label>
    <input type="radio" id="opt-two" name="radio" class="option"><label for="opt-two">No, I'm not sure.</label>

  </div>

<div id="answer-sec"></div>

</div>

JS:

$(function () {
    $(".option").button();
    $("#opt-one").click(function () {
        $("#options").remove();
        $("#answer-sec").html('<div id=""><input type="radio" id="dis-h-one" class="opts" name="radio"><label for="dis-h-one">It displays an h1 on the screen.</label><input type="radio" class="opts" id="dis-no" name="radio"><label for="dis-no">It displays nothing on the screen.</label></div>');
        $(".opts").button();

        $("#dis-h-one").click(function () {

            $("#answer-sec").html('<p> Correct! Now let&apos;s <a href="4"> move on</a>. </p>');
        });

        $("#dis-no").click(function () {

            $("#answer-sec").html('<p> Sorry, that is incorrect. This code makes an h1 appear on the screen. Let&apos;s <a href="4"> continue</a>. </p>');
        });

    });
$("#opt-two").click(function () {
    $("#options").remove();
    $("#answer-sec").html('<p> It makes an h1 appear on the screen. Now let&apos;s <a href="4">continue</a></p>');


});
    });

Answer 1

我将其添加到 jQuery 中:

.click(函数 (e) { e.preventDefault();`