加載選擇元素時的 JQuery 事件處理程序

Question

當 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);
 }); 

Answer 1

我想我們都很困惑。 但是快速分解您的選擇。
_{在對問題進行更新后，您可能尋求的答案似乎是我的最后一個示例。 請同時考慮所有其他信息，因為它可能會幫助您確定更好的“最終目標”流程。}

首先，您有另一個答案中指出的 DOM Load 事件。 這將在頁面完成加載時觸發，並且應該始終是您在 HEAD JavaScript 中的第一個調用。 要了解更多信息，請參閱此 API 文檔。

例子

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

然后你有可以附加到選擇元素的事件，例如“change”、“keyup”、“keydown”等......通常的事件綁定是“change”和“keyup”，因為這兩個是最常見的結束用戶期望“改變”的事件。 要了解更多信息，請閱讀 jQuery 的.delegate() （僅限 1.6 及以下版本） 、.on() 、.change()和.keyup() 。

例子

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

現在將更改事件delegating給文檔並不是“必要的”，但是，它確實可以省去以后的麻煩。 委托允許滿足 Selector 條件（exp. 'select'、'#elementID' 或 '.element-class'）的未來元素（未在 DOM 加載事件中加載的內容）自動將這些事件方法分配給它們。

但是，如果您知道這不會成為問題，那么您可以使用事件名稱作為 jQuery 元素對象方法，並使用更短的代碼。

例子

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

最后一點，在某些 Ajax 調用期間還會發生“成功”和“完成”事件。 所有 jQuery Ajax 方法都以一種或另一種方式具有這兩個事件。 這些事件允許您在 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());
});

更多閱讀：

• .ajax()
• 。得到（）
• 。加載（）
• 。郵政（）

還有一點要記住，所有 jQuery Ajax 方法（如 .get、.post）只是$.ajax({ /* options|callbacks */ })的簡寫版本！

Answer 2

你為什么不直接使用：

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

還是我錯過了什么？

Answer 3

對於您的動態select ，您可以將警報放在回調中。

在你的.post()回調函數中，試試這個：

.done(function(data) {
    data = $(data);
    alert(data.find("select").val());
});

Answer 4

好的，如果我理解錯了，請糾正我。 因此，您希望在加載文檔時以及在通過 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();
});

Answer 5

如果您的選擇元素是動態加載的，為什么不在處理響應后添加事件處理程序？

例如對於 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
  },
  ...
});

Answer 6

您希望在加載用戶選擇時檢查所有選擇，還是只檢查用戶選擇？...

$.post("./user_functions.php", {reason: "get_users", userID: uID}).done(function(data) {  
    $("#userSelector").html(data);
    //Then this:
    var currentSelectVal = $("#userSelector").val();
    alert(currentSelectVal);
});

Answer 7

我的解決方案與上面的海報有點相似，但使用了觀察者（pubsub）模式。 您可以在 Google 上搜索各種 pub 子庫，也可以使用 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
});