'ドキュメント'と 'セレクタ自体'をjQueryに入れますか？ - javascript、jquery、jquery-ui

みんな私は私が推測するいくつかの方法で関連していると思う2つの質問があります。最初：

1. これら2つの違いは何ですか：

   $(document).on("click","#someselector", function() {
   
   //do something
   
   });
   

対これ

$("#selector")on("click", function(){
/do something
});

両方が機能する場合もあれば、機能しない場合もあります。

2番目の質問：

私は jQuery UI このようなダイアログ：

function this_dialog(id) {

$("#div-id-for-the-dialog").dialog({
autoOpen            : false,
modal               : true,
draggable           : false,
width               : 400,
buttons         : [{
id      : id,
text    : "Ok"
},{
text    : "Cancel",
click   : function () {
$("#div-id-for-the-dialog").dialog("close");
}
}]
});

}

ご覧のとおり、IDは関数に渡され、多くの人がこのダイアログを呼び出して一意のIDを渡します。 IDは、にのみ割り当てられます。 Ok ボタン。

したがって、この関数を呼び出して一意のダイアログをロードすると、次のようになります。

add_section_complete_reopen_dialog("my-unique-dialog-id"); //passing the id
$("#div-id-for-the-dialog").html("I have a unique dialog now? ok?");

このコードで[OK]を押すと：

$(document).on("click","#my-unique-dialog-id", function () {
//Do some ajax call here
});

このJSエラーが発生します： TypeError: s is undefined しかし、ajaxは成功しています。そのエラーが何であるかを知りたいだけです。

だから私が最初の質問に関連していると言うとき、私がクリックコードをこれに置き換えるときです：

$("#my-unique-dialog-id").on("click", function () {
//Do some ajax call here
});

もう動作しません。

ありがとう

回答：

回答№1の場合は7

$(document).on("click", "someselector", function() ...);

は 代表団 構文。これにより、コードの実行時に存在しない可能性のある要素にハンドラーをバインドできます。見る：

動的に作成された要素のイベントバインド

$("someselector").on("click", function() ...);

このコードを実行するときに、セレクターに一致する要素にのみハンドラーをバインドします。

---

回答№2の場合は0

私は知っているので最初の答えを正解とマークしました2番目の質問をデバッグする方法について十分な情報を提供しませんでしたが、誰かが私と同じエラーに遭遇した場合に備えて、その理由を見つけました。したがって、jQuery UIダイアログを次のように初期化すると、次のようになります。

function this_dialog(id) {

$("#div-id-for-the-dialog").dialog({
autoOpen            : false,
modal               : true,
draggable           : false,
width               : 400,
buttons         : [{
id      : id,
text    : "Ok"
},{
text    : "Cancel",
click   : function () {
$("#div-id-for-the-dialog").dialog("close");
}
}]
});

}

次のようなボタンのクリックイベントを必ず含めてください。

関数this_dialog（id）{

$("#div-id-for-the-dialog").dialog({
autoOpen            : false,
modal               : true,
draggable           : false,
width               : 400,
buttons         : [{
id      : id,
text    : "Ok",
click   : function () {
//include the click event, even if you have nothing to put here.
}
},{
text    : "Cancel",
click   : function () {
$("#div-id-for-the-dialog").dialog("close");
}
}]
});

}

---