加载select元素时的JQuery事件处理程序 [英] JQuery event handler when select element is loaded

问题描述

当DOM 选择元素加载完毕时，是否有要在JQuery中使用的事件处理程序？
这是我想要实现的。它正在与除load之外的其他事件一起工作。

这段代码加载在头上。

  $ （文件）.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）; 
}）; 
  

解决方案

我想我们都很困惑。但是快速分解您的选项。

_{对问题进行更新后，您可能会寻求的答案就是我的最后一个例子。请考虑所有其他信息，因为它可能有助于您确定一个更好的过程为您的结束目标。}

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

示例

  $（document）.ready（function（）{
 alert（$（'select' ）.val（））; 
}）
 / * | OR | * / 
 $（function（）{
 alert（$（'select'）。val（））; 
}）
  

然后你可以将事件附加到Select Element，例如change，keyup，keydown等...通常的事件绑定是更改和密钥，因为这2个是用户期望更改的最常见的终止事件。要了解更多信息，请阅读有关jQuery的 .delegate（）（仅限1.6及以下版本）， .on（），。change（）和 .keyup（）。

示例

  $（document）.on（'change keyup '，'select'，function（e）{
 var currentSelectVal = $（this）.val（）; 
 alert（currentSelectVal）; 
}）
  

现在委托文档的更改事件不是必要然而，它真的可以节省头痛的道路。委托允许将来的元素（DOM加载事件未加载的东西）满足Selector限定条件（exp。'select'，'#elementID'或'.element-class'）自动分配这些事件方法。 / p>

但是，如果你知道这不会是一个问题，那么你可以使用一些较短代码的jQuery元素对象方法来使用事件名称。

示例

  $（'select'）。change（function（e） b $ b var currentSelectVal = $（this）.val（）; 
 alert（currentSelectVal）; 
}）
  

在最后一个注释中，还有一些Ajax调用中发生的成功和完成事件。所有jQuery Ajax方法都有这两种事件。这些事件允许您在Ajax调用完成后执行操作。

例如，如果你想获取一个选择框AFTER和Ajax调用的值。

例子

  $。ajax（{
 url：'http://www.mysite.com/ajax。 php'，
 success：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（）


• < a href =http://api.jquery.com/jQuery.get/ =noreferrer>。get（）


• 。load（）


• 。post（）

还有什么要保留的记住，所有jQuery Ajax方法（如.get，.post）只是 $的简写版本。ajax（{/ * options | callbacks * /}）！

Is there an event handler to use in JQuery when a DOM select element has finished loading? This is what I want to achieve. It is working with other events except 'load'.

This piece of code is loaded in the head.

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

The question was badly formed earlier. I need to attach the event handler to all select elements, both present when the document is loaded and dynamically created later.

They are loaded from a JQuery Post to a php-page. Similar to this:

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

解决方案

I think we're all confused. But a quick break down of your options.
_{After an update made to the Question, it looks like the answer you might seek is my last example. Please consider all other information as well though, as it might help you determine a better process for your "End Goal".}

First, You have the DOM Load event as pointed out in another answer. This will trigger when the page is finished loading and should always be your first call in HEAD JavaScript. to learn more, please see this API Documentation.

Example

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

Then you have Events you can attach to the Select Element, such as "change", "keyup", "keydown", etc... The usual event bindings are on "change" and "keyup" as these 2 are the most common end events taking action in which the user expects "change". To learn more please read about jQuery's .delegate() (out-dated ver 1.6 and below only), .on(), .change(), and .keyup().

Example

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

Now delegating the change event to the document is not "necessary", however, it can really save headache down the road. Delegating allow future Elements (stuff not loaded on DOM Load event), that meet the Selector qualifications (exp. 'select', '#elementID', or '.element-class') to automatically have these event methods assigned to them.

However, if you know this is not going to be an issue, then you can use event names as jQuery Element Object Methods with a little shorter code.

Example

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

On a final note, there is also the "success" and "complete" events that take place during some Ajax call. All jQuery Ajax methods have these 2 events in one way or another. These events allow you to perform action after the Ajax call is complete.

For example, if you wanted to get the value of a select box AFTER and Ajax call was made.

Example

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

More reading:

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

Something else to keep in mind, all jQuery Ajax methods (like .get, .post) are just shorthand versions of $.ajax({ /* options|callbacks */ })!

这篇关于加载select元素时的JQuery事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！