Question

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

第一组按钮工作，其中包含HTML框。但是如果用户点击第一个按钮，则下一组按钮 - 单选按钮 - 不会使用jQuery UI进行样式设置。在控制台上，它说$(...).button() is not a function。为什么.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(function (的ë ) {的 e.preventDefault（）; `

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

1 个答案: