JQuery event handler when loading a select element

Question

Is there an event handler in jQuery when the DOM select element finished loading? This is what I want to achieve. It works with events other than load.

This piece of code is loaded into the head.

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

The question was poorly formed earlier. I need to bind an event handler to all select elements that are present when the document is loaded and dynamically created later.

They are loaded from the jQuery post to the php page. Similar to this:

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

Answer 1

I think we are all embarrassed. But quickly break your options.
_{After updating the question, it seems like the answer you can find is my last example. Please consider all other information as well, as this may help you determine the best process for your "Ultimate Goal."}

First, you have a DOM Load event, as indicated in another answer. This will complete the page loading and will always be your first call to HEAD JavaScript. to learn more, see this API documentation .

Example

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

Then you have events that you can attach to the Select element, for example, "change", "keyup", "keydown", etc. The usual event bindings are on “change” and “keyup”, since these are the 2 most common end events that take action in which the user expects a “change”. Read more about jQuery to learn more . Delegate () (deprecated version 1.6 and below),. on () ,. change () and . KeyUp () .

Example

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

Now a delegating document change event is not "necessary", but it can really save a headache in the future. Delegation allows future elements (material not loaded into the DOM Load event) that match the Selector qualifications (exp. 'Select', '#elementID' or '.element-class') to automatically assign these event methods to them.

However, if you know that this will not be a problem, you can use event names like the jQuery Element Object Method with a little short code.

Example

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

The final note also contains “successful” and “complete” events that occur during some Ajax call. All jQuery Ajax methods have these 2 events anyway. These events allow you to perform actions after an Ajax call completes.

For example, if you want to get the value of the AFTER and Ajax selection fields, do the following:

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

Additional Information:

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

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

Answer 2

Why don't you just use:

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

Or am I missing something?

Answer 3

For dynamic select you can put a warning in the callback.

In your .post() callback function, try the following:

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

Answer 4

Well, correct me if I get it wrong. Thus, you want to do something with the selections when the document is loaded, and also after receiving the latest data through an ajax call. Here is how you could do it.

Do this first when the document loads, so

 <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> 

Now every time you have an ajax request, the ajaxSend and ajaxComplete functions are called. So add this after the above:

 $(document).ajaxSend(function () { }).ajaxComplete(function () { alterSelects(); }); 

The above code will light up as soon as the request is completed. But I think you will probably want to do this after you do something with the results you got from the ajax call. You will need to do this in $ .post, like this:

 $.post("yourLink", "parameters to send", function(result){ // Do your stuff here alterSelects(); }); 

Answer 5

If your selections are dynamically loading, why not add an event handler after processing the response?

eg. for 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

Do you want all the checkboxes checked when loading User-Select or just User-Select? ...

 $.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

My solution is a bit like the posters above, but for using the observer (pubsub) template. You can use Google for various pub libraries or use special jQuery events. The idea is to subscribe to a topic / user event and run a function that attaches the event. Of course, it’s best to filter out items that were initialized earlier. I am not testing the following codes, but I hope you get this idea.

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