web-dev-qa-db-ja.com

jQueryダイアログのロード後に関数を実行する

これは簡単な質問かもしれませんが、うまく機能させることができません。 jQueryダイアログを使用して、自分のWebサイトの別のページからロードされたフォームを表示しています。ユーザーがリンクをクリックすると、ダイアログが表示されます。私がやろうとしていることは、ダイアログにHTMLを読み込んだ後に関数を実行することです。ダイアログをロードするためのコードは次のとおりです。

$(document).ready(function () {
    $(".openDialog").live("click", function (e) {
        e.preventDefault();

        $("#dialogBox").dialog({
            title: $(this).attr("data-dialog-title"),
            close: function() { $(this).remove() },
            modal: true
        })
        .load(this.href);
    });

    $(".close").live("click", function (e) {
        e.preventDefault();
        $(this).closest(".dialog").dialog("close");
    });
});

HTMLがダイアログに読み込まれたときに呼び出す関数myFunction（）があります。かなり探し回った後、次のように.loadで関数を指定してみました。

.load(this.href, myFunction());

次のように、openイベントも使用してみました。

open: myFunction(),

何が悪いのですか？

jqueryjquery-uijquery-ui-dialog
13
HTX9

ソリューション＃1：

.load(this.href, myFunction);

ソリューション＃2：

.load(this.href, function(){
  myFunction();
});

ソリューション＃3（推奨）：

open: myFunction,

ソリューション＃4：

open: function(){
  myFunction();
}

何故ですか？

var foo = myFunction(); // `foo` becomes your function return value
var bar  = myFunction; // `bar` becomes your function
bar();

コードは次のようになります。

$("#dialogBox").load('http://example.com').dialog({
  title: $(this).attr("data-dialog-title"),
  close: function() { $(this).remove() },
  modal: true,
  open : myFunction // this should work...
})
30
Peter

解決策はどれも私にとってはうまくいきませんでした。ダイアログが開いて完了したときにopenコールバックが呼び出されないためだと思います。それを機能させるには、setTimeoutを使用する必要がありました。

$('#dialogBox').dialog('open');

setTimeout(function(){
    // myFunction();
},100);

myFunctionの内容によって異なります。

4
Bruno Calza

JQuery UI-v1.11.4の場合、以下のコードスニペットの「complete」は機能しなくなります。

show: {
    effect: 'clip',
    complete: function() {
        console.log('done');
    }
},

JQuery UI-v1.11.4で機能するソリューション。 ：

ダイアログショーでjqueryエフェクトにコールバックをアタッチする方法？

losnir で提案されているように、$（this）.parent（）。promise（）。doneを使用します。

$("#dialog").dialog({
show: {
    effect: "drop",
    direction: "up",
    duration: 1000
},
hide: {
    effect: "drop",
    direction: "down",
    duration: 1000
},
open: function () {
    $(this).parent().promise().done(function () {
        console.log("[#Dialog] Opened");
    });
},
close: function () {
    $(this).parent().promise().done(function () {
        console.log("[#Dialog] Closed");
    });
}
});

お役に立てれば。

2
Yang Kin

外部ページをロードして、ロードしたページで関数を実行したいという問題がありました。どうやらopen：を使用すると、ダイアログメソッドでは機能しませんでした。

jQuery("#pop-sav").load('/external/page', my_function_name );

jQuery("#pop-sav").dialog({
      resizable: false,
      width:'90%',
      autoReposition: true,
      center: true,
      position: 'top',
      dialogClass: 'pop-dialog pop-sort'
});

my_function_nameは、かっこを付けずに、機能させるために関数自体の名前のみを含める必要があります。これがどのように機能するのか正確にはわかりませんが、理解できる場合はコメントで教えてください。

0
Patoshi パトシ

focusイベントを使用することもできます。これは、ダイアログボックスを開いた後、フォーカスを取得したときにトリガーされます。

ドキュメントはこちら

0
prince jose