javascript - 加载选择元素时的 JQuery 事件处理程序

Question

当 DOM select 元素完成加载时，是否有一个事件处理程序可以在 JQuery 中使用？这就是我想要实现的。它正在处理除“加载”之外的其他事件。

这段代码在head中加载。

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

这个问题之前形成的很糟糕。我需要将事件处理程序附加到所有 select 元素，这两个元素在加载文档时出现并在以后动态创建。

它们从 JQuery Post 加载到 php 页面。类似这样:

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

Answer 1

我想我们都很困惑。但快速分解您的选择。
_{对问题进行更新后，看起来您可能寻求的答案是我的最后一个例子。不过，请同时考虑所有其他信息，因为它可能有助于您为“最终目标”确定更好的流程。}

首先，您有另一个答案中指出的 DOM Load 事件。这将在页面加载完成时触发，并且应该始终是您在 HEAD JavaScript 中的第一个调用。要了解更多信息，请参阅 this API Documentation .

例子

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

然后您可以将事件附加到选择元素，例如“change”、“keyup”、“keydown”等...通常的事件绑定(bind)在“change”和“keyup”上，因为这两个是最常见的结束事件采取用户期望“改变”的行动。要了解更多信息，请阅读 jQuery 的 .delegate() (仅限过时版本 1.6 及以下版本)，.on() , .change() , 和 .keyup() .

例子

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

现在 委托(delegate) 文档的更改事件不是“必要的”，但是，它确实可以避免以后的麻烦。委托(delegate)允许满足选择器条件(例如“select”、“#elementID”或“.element-class”)的 future 元素(未在 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());
});

更多阅读:

• .ajax()
• .get()
• .load()
• .post()

还有一点要记住，所有 jQuery Ajax 方法(如 .get、.post)只是 $.ajax({/* options|callbacks */}) 的简写版本!