5

DOM選択要素の読み込みが完了したときに JQuery で使用するイベント ハンドラーはありますか? これが私が達成したいことです。「ロード」以外の他のイベントで動作しています。

このコードはヘッドにロードされます。

$(document).on('load', 'select', function(){
    var currentSelectVal = $(this).val();
    alert(currentSelectVal);
    } );

質問は以前にひどく形成されました。ドキュメントがロードされたときに存在し、後で動的に作成されるすべての選択要素にイベント ハンドラーをアタッチする必要があります。

それらは JQuery Post から php ページにロードされます。これに似ています：

$.post("./user_functions.php", 
{reason: "get_users", userID: uID}) 
.done(function(data) { $("#userSelector").html(data);
 });
4

7 に答える 7

9

私たちは皆混乱していると思います。しかし、あなたのオプションの簡単な内訳.
質問に更新が加えられた後、あなたが求めるかもしれない答えは私の最後の例のようです. ただし、「最終目標」のより良いプロセスを決定するのに役立つ可能性があるため、他のすべての情報も考慮してください。

まず、別の回答で指摘されているように、DOM Load イベントがあります。これは、ページの読み込みが完了したときにトリガーされ、常に HEAD JavaScript で最初に呼び出す必要があります。詳細については、この API ドキュメントを参照してください。

例

$(document).ready(function () {
    alert($('select').val());
})
/*  |OR|    */
$(function() {
    alert($('select').val());
})

次に、「change」、「keyup」、「keydown」など、Select 要素にアタッチできるイベントがあります。通常のイベント バインディングは、「change」と「keyup」です。これらの 2 つは最も一般的です。ユーザーが「変更」を期待するアクションを実行するイベントを終了します。詳細については、jQuery の.delegate() (古いバージョン 1.6 以下のみ)、.on()、.change()、および.keyup()についてお読みください。

例

$(document).on('change keyup', 'select', function(e) {
    var currentSelectVal = $(this).val();
    alert(currentSelectVal);
})

現在delegating、ドキュメントへの変更イベントは「必要」ではありませんが、今後の頭痛の種を本当に減らすことができます。デリゲートにより、セレクターの条件 (exp. 'select'、'#elementID'、または '.element-class') を満たす将来の要素 (DOM Load イベントで読み込まれないもの) に、これらのイベント メソッドが自動的に割り当てられるようになります。

ただし、これが問題にならないことがわかっている場合は、少し短いコードでイベント名を jQuery 要素オブジェクト メソッドとして使用できます。

例

$('select').change(function(e) {
    var currentSelectVal = $(this).val();
    alert(currentSelectVal);
})

最後に、一部の Ajax 呼び出し中に発生する「成功」イベントと「完了」イベントもあります。すべての jQuery Ajax メソッドには、何らかの形でこれら 2 つのイベントがあります。これらのイベントを使用すると、Ajax 呼び出しが完了した後にアクションを実行できます。

たとえば、Ajax 呼び出しが行われた後に選択ボックスの値を取得したい場合。

例

$.ajax({
    url: 'http://www.mysite.com/ajax.php',
    succuess: function(data) {
        alert($("select#MyID").val());
    }
})
/*  |OR|    */
$.post("example.php", function() { alert("success"); })
.done(function() { alert($("select#MyID").val()); })
/*  |OR|    */
$("#element").load("example.php", function(response, status, xhr) {
    alert($("select#MyID").val());
});

もっと読む：

すべての jQuery Ajax メソッド (.get、.post など) は、単に$.ajax({ /* options|callbacks */ })!

于 2013-06-25T12:59:12.037 に答える
3

なぜあなただ​​けを使用しないでください：

$(document).ready(function () {
   //Loaded...
});

または、何か不足していますか？

于 2013-06-25T12:50:24.937 に答える
1

dynamicselectの場合、コールバックにアラートを入れることができます。

.post()コールバック関数で、これを試してください：

.done(function(data) {
    data = $(data);
    alert(data.find("select").val());
});
于 2013-06-25T12:59:38.283 に答える
1

わかりました、これが間違っていることを理解していれば、私を修正してください。そのため、ドキュメントがロードされたとき、および ajax 呼び出しを介して新しいデータを取得した後に、選択で何かをしたいと考えています。これを実現する方法は次のとおりです。

最初にドキュメントがロードされたときにそれを行うので、

<script>
//This is the function that does what you want to do with the select lists
function alterSelects(){
 //Your code here
}
  $(function(){
      $("select").each(function(){
           alterSelects();
      });
  });
</script>

これで、ajax リクエストがあるたびに ajaxSend および ajaxComplete 関数が呼び出されます。したがって、上記の後にこれを追加します。

$(document).ajaxSend(function () {
}).ajaxComplete(function () {
    alterSelects();
});

上記のコードは、リクエストが完了するとすぐに実行されます。しかし、おそらく ajax 呼び出しから返された結果を使用して何かを実行した後、それを実行したいと思うでしょう。次のように $.post で行う必要があります。

$.post("yourLink", "parameters to send", function(result){
    // Do your stuff here
    alterSelects();
});
于 2013-06-25T13:10:47.753 に答える
0

select 要素が動的に読み込まれる場合、応答を処理した後にイベント ハンドラーを追加してみませんか?

例えば ​​ajax の場合

$.ajax({
  ...
  success: function(response) {
   //do stuff 
   //add the select elements from response to the DOM 
   //addMyEventHandlerForNewSelect();

   //or

   //select the new select elements from response
   //add event handling on selected new elements
  },
  ...
});
于 2013-06-25T13:00:04.100 に答える
0

私の解決策は上記のポスターと少し似ていますが、オブザーバー (pubsub) パターンを使用します。そこにあるさまざまなパブサブライブラリをグーグルで検索したり、jQuery のカスタムイベントを使用したりできます。アイデアは、トピック/カスタム イベントをサブスクライブし、イベントを添付する関数を実行することです。もちろん、以前に初期化された要素を除外するのが最善です。以下のコードはまだテストしていませんが、理解していただければ幸いです。

function attachEventsToSelect(html) {
    if (!html) { // html is undefined, we loop through the entire DOM we have currently
        $('select').doSomething();
    } else {
        $(html).find('select').doSomething(); // Only apply to the newly added HTML DOM
    }
}

$(window).on('HTML.Inserted', attachEventsToSelect);

// On your ajax call
$.ajax({
    success: function(htmlResponse) {
        $(window).trigger('HTML.Inserted', htmlResponse);
    }
});

// On your DOM ready event
$(function() {
    $(window).trigger('HTML.Inserted'); // For the current set of HTML
});
于 2014-02-07T11:51:17.330 に答える