Диалог JQuery не работает?

Question

Я новичок в JQuery и пытаюсь вставить диалог, но он не работает.

В HTML я объявить div и button

<input id="remove" type="button" value="Remove" /> 
<div id="dialog" title="DIALOG">This is dialog</div> 

В JS файл "table.js" Я написал:

$(document).on("click", "#remove", function() { 
    $("#dialog").dialog("open"); 
}); 

Я использую Bundle как этот

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
         "~/Scripts/jquery-2.1.3.js", 
         "~/Scripts/jquery-2.1.3.min.js")); 

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
         "~/Scripts/jquery-ui-1.8.20.js", 
         "~/Scripts/jquery-ui-1.8.20.min.js")); 

bundles.Add(new ScriptBundle("~/bundles/table").Include(
        "~/Scripts/table.js")); 

затем импортировать в _layout

@Styles.Render("~/Content/cssTable") 
@Scripts.Render("~/bundles/modernizr") 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryui") 
@Scripts.Render("~/bundles/jqueryval") 
@Scripts.Render("~/bundles/table") 

Я пропустил какой-либо шаг или код? Когда я нажимаю button для удаления, он не работает, когда я отлаживался в браузере, он также не обнаруживает ошибок.

Кстати, функция click() также не работает.

Большое вам спасибо!

Answer 1

На самом деле вы не можете вызвать методы в диалоговом окне перед инициализацией. Это дает ниже ошибки

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

Таким образом, вы должны инициализировать его, как показано ниже:

$(document).ready(function(){ 
$("#dialog").dialog({autoOpen:false}); 
});