Модальное диалоговое окно Jquery отображается только при первом щелчке

Следующий код отлично работает только для события первого клика. Однако при любом последующем щелчке ничего не происходит.

<input type="submit" name="add" value="Add it" onClick="javascript:Add(); return false;">

function Add()
{
   $(function(){
    var dialogOpts = {
        width: 880,
        height: 270,
        minWidth: 880,
        minHeight: 270,
        maxWidth: 890,
        maxHeight: 300
    };
    $("#add").dialog(dialogOpts);
    });
 }

Если я удалю return false из:

<input type="submit" name="add" value="Add it" onClick="javascript:Add(); return false;">

У меня это работает для Firefox, но в IE8 окно отображается в течение одной или двух секунд, а затем исчезает (кэш очищен и все такое).

Кажется, в этой сети есть много примеров этой проблемы, но я боюсь, что я слишком новичок в jquery, чтобы применять их :(

Большое спасибо


jquery onclick jquery-ui jquery-ui-dialog
person ADM    schedule 10.07.2012    source источник
comment
Если вы используете атрибут onclick, вам не нужно указывать javascript: , так как он уже интерпретируется как Javascript.   -  person Anthony Grist    schedule 10.07.2012
comment
@AnthonyGrist yes дает предположение, что вызывается какой-то javascript.   -  person Shiv Kumar Ganesh    schedule 10.07.2012
comment
Возможный дубликат: stackoverflow.com/questions/1701942 / — см. этот пост в блоге: blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog   -  person Ashley Strout    schedule 10.07.2012
comment
Содержимое @Shiv onclick уже интерпретируется как javascript, поэтому нет необходимости в javascript   -  person Christoph    schedule 10.07.2012
comment
@Christoph Да, это то, что я имел в виду :)   -  person Shiv Kumar Ganesh    schedule 10.07.2012

Ответы (2)


arrow_upward
2
arrow_downward

Напишите это, чтобы создать экземпляр вашего диалога:

$(function(){

    $diag = $("#add");
    var dialogOpts = {
        width: 880,
        height: 270,
        minWidth: 880,
        minHeight: 270,
        maxWidth: 890,
        maxHeight: 300,
        autoOpen: false
    };
    $diag.dialog(dialogOpts); // This instantiates the dialog once.
    //And then add this eventhandler:
    $("input[name='add']").click(function(){
       $diag.dialog('open');
    });
});

и удалите весь этот встроенный onclick материал - избегайте его везде, где можете...

person Christoph    schedule 10.07.2012
comment
$diag.dialog не является функцией, указывающей на $diag.dialog(dialogOpts); - person ADM; 10.07.2012
comment
@ user523129 что ты пытаешься сказать? Я не понимаю... Переменная $diag остается в этой области такой же, почему она не должна работать? - person Christoph; 10.07.2012
comment
что я получаю эту ошибку в консоли Firebug: $diag.dialog не является функцией, и модальное окно не открывается. - person ADM; 10.07.2012
comment
@user523129 user523129 ну, я исправил свою опечатку ;) Попробуйте еще раз. - person Christoph; 10.07.2012
comment
$(input[name='add']).on не является функцией - person ADM; 10.07.2012
comment
значит у вас старая версия jquery. Я подправлю свой код. - person Christoph; 10.07.2012
comment
теперь нет ошибок, но нет модальных окон :( Я очень ценю ваши усилия, спасибо! - person ADM; 10.07.2012
comment
jquery-ui-1.7.1.custom.min.js — моя версия - person ADM; 10.07.2012

arrow_upward
0
arrow_downward

Вы хотите удалить часть своего кода :) "javascript:" не требуется

<input type="submit" name="add" value="Add it" onClick="Add();">

а на дом готовая часть не нужна

function Add()
{
    var dialogOpts = {
        width: 880,
        height: 270,
        minWidth: 880,
        minHeight: 270,
        maxWidth: 890,
        maxHeight: 300
    };
    $("#add").dialog(dialogOpts);
 }
person algiecas    schedule 10.07.2012
comment
спасибо, но все так же, как когда я удаляю return false. Работает для Firefox, но в IE8 модальное окно исчезает через секунду или две :( - person ADM; 10.07.2012