Question

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

这段代码加载到头部。

$(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());
})

然后你有可以附加到选择元素的事件，例如“更改”，“键盘”，“keydown”等...通常的事件绑定在“更改”和“键盘”上，因为这两个是采取行动的最常见的最终事件，用户期望“改变”。要了解详情，请阅读jQuery的.delegate()（仅限过时版本1.6及以下版本），.on()，.change()和.keyup()。

实施例

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

现在delegating文档的更改事件不是“必要的”，但是，它确实可以避免头痛。委托允许未来的元素（未加载在DOM Load事件上的东西）满足Selector资格（exp。'select'，'＃elementID'或'.element-class'）以自动分配这些事件方法。< / p>

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

更多阅读：

要记住的其他事项，所有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

如果您的select元素是动态加载的，为什么不在处理响应后添加事件处理程序？

e.g。对于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
});

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

7 个答案:

实施例

实施例

实施例

实施例