对话框给出 TypeError

Question

我只是想打开一个 JQ 对话框，我得到一个 JS TypeError（不是函数）。
这是 div:

<div id="change_dialog" style="display:none">
        Change the number of attendees<br /> for <span id="name_to_change">    </span>?
        <select id="change_select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        </select></p>
       <input type="button" id="change_qty_button"  value="Change" /> &nbsp;<input type="button" id="change_abort" value="Cancel" />
    </div>

这是 JS：

$('#change_button').click(function(){
    $(".res_button").each(function(){   
        if ($(this).prop('checked')){
            $id = $(this).val();
            change_name=$("#"+$id).val();
        }
    });
    $('#name_to_change').html(change_name);
    $('#change_dialog').dialog('open'); 
    $('.button_class').hide();
    return false;
}); 

$('#change_dialog').dialog({
    autoOpen: false,
    modal: false,
    minWidth: 180,
    closeOnEscape: true,
    title: "Attendee Quantity Change",
    show:{ effect: "fold", duration: 1000 },
    hide:{ effect: "fold", duration: 1000 }
});

这是错误行：

TypeError: $(...).dialog is not a function

错误指向的行是：$('#change_dialog').dialog({

我看不出哪里有问题。我对卡祖笛的各种线路进行了评论，以尝试找出错误。即使函数存在但为空，我仍然会遇到同样的错误。

Answer 1

如前所述，您需要包含 jQuery UI 库，它位于 https://code.jquery.com/ui/。此外，您的 javascript 中有一个小错误，它会给您一个未定义的变量错误。

JavaScript

$(document).ready(function() {
  $('#change_button').click(function(){
      var change_name; //if not included, is undefined at line 10
      $(".res_button").each(function(){   
          if ($(this).prop('checked')){
              $id = $(this).val();
              change_name = $("#"+$id).val();
          }
      });
      $('#name_to_change').html(change_name);  //this was undefined
      $('#change_dialog').dialog('open'); 
      $('.button_class').hide();
      return false;
  });

你可以看到它在这个 fiddle 中工作：https://jsfiddle.net/2pkzsxun/1/

希望对您有所帮助！

对话框给出 TypeError

Dialog gives TypeError

javascript

jquery

dialog

typeerror