加载select元素时的JQuery事件处理程序

Question

当DOM select元素加载完成后,是否有一个在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());
})

然后你有可以附加到选择元素的事件,例如"更改","键盘","keydown"等...通常的事件绑定是"更改"和"键盘",因为这两个是最常见的采取行动的终端事件,用户期望"改变".要了解更多信息,请阅读jQuery的.delegate() (过时的版本1.6及以下只).对() ,.change() ,和.keyup() .

例

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

现在delegating,对文档的更改事件不是"必要的 ",但是,它确实可以避免头痛.委托允许未来的元素(未加载在DOM Load事件上的东西)符合Selector资格(exp.'select','#elementID'或'.element-class')以自动分配这些事件方法.

但是,如果您知道这不会成为问题,那么您可以将事件名称用作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());
});

更多阅读:

• 阿贾克斯()
• .得到()
• .加载()
• .POST()

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