Почему мои кнопки jQuery не отображаются в моем диалоговом окне?

Question

Посмотрите на это jsfiddle. Раньше я использовал диалоги jQuery, и это тот же самый код, который я использую в другом проекте. Единственное отличие состоит в том, что я получаю библиотеки JQuery от Google вместо хостинг их сам:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"> </script> 


<div id="dialog-confirm" title="Confirmation Required" > 
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Do you want to delete?</p> 
     </div> 
<a href="http://google.com" class="deleteLink">Test Dialog</test> 

Тогда у меня есть сценарий, как это:

$(document).ready(function() { 
$("#dialog-confirm").dialog({ 
    autoOpen: false, 
    modal: true, 
    resizable: false, 
    height:180, 
}); 

$(".deleteLink").click(function(e) { 
e.preventDefault(); 
var targetUrl = $(this).attr("href"); 

$("#dialog-confirm").dialog({ 
    buttons : { 
    "Confirm" : function() { 
     window.location.href = targetUrl; 
    }, 
    "Cancel" : function() { 
     $(this).dialog("close"); 
    } 
    } 
}); 

$("#dialog-confirm").dialog("open"); 
}); 

}); 

Диалог показывает, как ожидалось, но кнопки (Подтверждение/Отмена) не отображаются. Я думаю, что загружаю все соответствующие библиотеки jQuery и файл CSS. Есть что-то еще, что мне не хватает?

Я использовал FireBug, чтобы убедиться, что он вызывает код установки кнопки, но все же никаких кнопок.

Answer 1

причины ваш код не может быть работает в настоящее время может быть связанно с вы используете старую версию JQuery или JQuery UI в любом случае здесь является возможным исправлением:

$(document).ready(function() { 
var targetUrl; 
$("#dialog-confirm").dialog({ 
    autoOpen: false, 
    modal: true, 
    resizable: false, 
    height:180, 
    buttons: { 
    "Confirm" : function() { 
     window.location.href = targetUrl; 
    }, 
    "Cancel" : function() { 
     $(this).dialog("close"); 
    } 
    } 
}); 

$(".deleteLink").click(function(e) { 
e.preventDefault(); 
targetUrl = $(this).attr("href")  
$("#dialog-confirm").dialog("open"); 
}); 
}); 

кнопка должна быть назначена при создании .диалоговая функция, чтобы все еще иметь возможность передавать URL-адрес при нажатии кнопки. Я создал targetURL глобально, тогда вы можете назначить его в функции щелчка и по-прежнему обращаться к нему в функции диалога.

** извините, забыл переместите ссылку, чтобы заставить ее работать :) должно быть хорошо сейчас, также здесь есть ссылка на скрипку, действие ссылки не работает в скрипке, но я проверил его с предупреждением, и все проходит нормально: http://jsfiddle.net/GordnFreeman/wbGax/

Answer 2

Вы объявляете диалог дважды. Просто объедините их, и появятся кнопки.

$(document).ready(function() { 
    $("#dialog-confirm").dialog({ 
     autoOpen: false, 
     modal: true, 
     resizable: false, 
     height:180, 
     buttons : { 
     "Confirm" : function() { 
      window.location.href = targetUrl; 
     }, 
     "Cancel" : function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

Обновлено jsFiddle