Обробник подій JQuery при завантаженні елемента select

Чи є обробник подій для використання у JQuery, коли завантаження елемента DOM вибрати ? Це те, що я хочу досягти. Він працює з іншими подіями, крім "завантаження".

Цей шматок коду завантажується в голову.

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

Питання було погано сформовано раніше. Мені потрібно приєднати обробник подій до всіх елементів вибору , присутніх при завантаженні та динамічному створенні документа пізніше.

Вони завантажуються з повідомлення jQuery на сторінку php. Подібно до цього:

$.post("./user_functions.php", 
{reason: "get_users", userID: uID}) 
.done(function(data) { $("#userSelector").html(data);
 }); 
5
Коли він завантажений? Мовляв, існує внутрішнє навантаження? що ви маєте на увазі, коли завантажено вибір? Ви маєте на увазі змінили?
додано Автор SpYk3HH, джерело
Я думаю, що повністю відповів на всі ваші запитання. Дайте мені знати, якщо я можу пояснити більше. Посилання, які я включив, також повинні бути корисними. Щасти!
додано Автор SpYk3HH, джерело
Прочитайте деякі ваші коментарі і додайте більше до моєї відповіді. Я думаю, що саме ви шукаєте. Деякий спосіб перевірити вибрати після повідомлення Ajax?
додано Автор SpYk3HH, джерело
Скажіть нам як вони динамічно завантажуються. AJAX? Показати сценарій тут.
додано Автор George, джерело
Чи завантажується цей вхід на завантаження документа?
додано Автор George, джерело
Редагували і пояснювали. Сподіваюся, що моє питання стане більш ясним.
додано Автор Einar Sundgren, джерело

7 Відповіді

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 Приклад. Please consider all other information as well though, as it might help you determine a better process for your "End Goal".

По-перше, у вас є подія DOM Load, як показано в іншій відповіді. Це запускатиметься, коли сторінка завершиться завантаженням і завжди повинна бути вашим першим викликом у HEAD JavaScript. Щоб дізнатися більше, перегляньте цю документацію API .

Приклад

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

Потім у вас є події, які можна приєднати до виділеного елемента, такі як "зміна", "клавіатура", "клавіатура", і т.д. ... Звичайні прив'язки подій на "зміні" і "клавіатурі", оскільки ці 2 є найпоширенішими кінцеві події, що приймають дії, в яких користувач очікує "зміни". Щоб дізнатися більше, читайте про .delegate() (jQuery) (тільки з версії 1.6 і нижче), .on() , . change() і .keyup() .

Приклад

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

Тепер делегування події зміни документа не є "необхідним ", однак, це може заощадити головний біль у дорозі. Делегування дозволяють майбутнім елементам (матеріал, який не завантажується на подію завантаження DOM), які відповідають кваліфікації селектора (exp. 'Select', '#elementID' або '.element-class') для автоматичного призначення цих методів подій.

Однак, якщо ви знаєте, що це не буде проблемою, ви можете використовувати імена подій як методи об'єкта jQuery Element з невеликим коротшим кодом.

Приклад

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

На завершальній ноті, є також "успіх" і "повні" події, які відбуваються під час деякого виклику Ajax. У всіх методах jQuery Ajax ці 2 події так чи інакше. Ці події дозволяють виконувати дії після завершення виклику Ajax.

For Приклад, if you wanted to get the value of a select box AFTER and Ajax call was made.

Приклад

$.ajax({
    url: 'http://www.mysite.com/ajax.php',
    succuess: function(data) {
        alert($("select#MyID").val());
    }
})
/*  |OR|    */
$.post("Приклад.php", function() { alert("success"); })
.done(function() { alert($("select#MyID").val()); })
/*  |OR|    */
$("#element").load("Приклад.php", function(response, status, xhr) {
    alert($("select#MyID").val());
});

More reading:

Щось ще потрібно мати на увазі, всі методи jQuery Ajax (наприклад, .get, .post) - це лише скорочені версії $ .ajax ({/ * options | callbacks * /}) !

9
додано
@Einar Не впевнений, що ви бачили цю відповідь до або після, але саме тому я оновив кінець моєї відповіді. Я говорю саме про внесення змін після певного типу "POST" або "GET". Те, що вам потрібно подивитися, це успіх jQuery в їхніх методах Ajax.
додано Автор SpYk3HH, джерело
@Einar вірно. Ось чому я сказав, що подивимося на виклики success . До моменту успішної спрацьовування функції зворотного виклику всі нові елементи були завантажені, і, оскільки це "успіх", очевидно, що ви не мали помилки при отриманні деяких відповідних даних. Таким чином, ви не повинні мати жодних труднощів при отриманні значення "присутнього" вікна вибору, навіть якщо це було просто додано через .load або навіть у вашій функції зворотного виклику. Майте на увазі, якщо вибір буде "змінено", але вже існує, тоді ви можете використати мій другий приклад, але здається, що ви нічого не змінюєте? Не забувайте, що jQuery ajax також має "до відправлення"
додано Автор SpYk3HH, джерело
@Einar Я б також згадав, і я просто додав це до своєї відповіді, але, "Щось ще потрібно мати на увазі, всі методи jQuery Ajax (наприклад, .get, .post) є лише короткими версіями $ .ajax ({/ * options | callbacks * /}) ! "
додано Автор SpYk3HH, джерело
Ви відповіли на це питання
додано Автор George, джерело
Ще раз дякую вам. Цей останній приклад зробив це після деякого незначного tweeking. Я не роблю багато webprogramming так Im вибачте, якщо я переплутав вас з не знаючи занадто багато словника.
додано Автор Einar Sundgren, джерело
Ви коментуєте loaed в той час, як я пишу. Мені може знадобитися ще трохи читати ці функції. Але я зрозумів, що елементи, які не зареєстровані для обробників подій перед завантаженням, не доступні через звичайні маніпуляції з Javascript DOM.
додано Автор Einar Sundgren, джерело
Дякуємо, що взяли час. І я, мабуть, найбільше заплутався. Я повністю розумію, що ви говорите, але моя оригінальна проблема залишається: я хочу, щоб браузер виконував деякі завдання, коли елемент select динамічно завантажується. Не під час завантаження всього документа. І $ (document) .ready() буде тільки вогонь, коли документ спочатку завантажується.
додано Автор Einar Sundgren, джерело

Чому ви просто не використовуєте:

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

Або я щось пропускаю?

3
додано
або $ (навіть функція() {/ * do work * /}) ?!
додано Автор SpYk3HH, джерело
Як вони динамічно завантажуються?
додано Автор George, джерело
В основному, вони завантажуються з поштової допису до php-сторінки. Так: $ .post ("./ user_functions.php", {причина: "get_users", userID: uID}) .done (функція (дані) {$ ("# userSelector"). Html (дані) ;});
додано Автор Einar Sundgren, джерело
Питання було дуже поганим. Мені потрібно приєднати обробник подій до всіх виділених елементів, а також до тих, які динамічно завантажуються. Я зміню моє запитання.
додано Автор Einar Sundgren, джерело

Гаразд, виправте мене, якщо я зрозумів це неправильно. Таким чином, ви хочете зробити щось з вибирає, коли документ завантажується, а також після того, як ви отримаєте деякі свіжі дані через виклик 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();
});
1
додано

Для динамічного вибору select ви можете помістити попередження в зворотній виклик.

У функції .post() поверніть спробу:

.done(function(data) {
    data = $(data);
    alert(data.find("select").val());
});
1
додано

Моє рішення трохи схоже на плакати вище, але використовувати шаблон спостерігача (pubsub). Ви можете Google для різних під-бібліотек публіки там, або ви можете використовувати спеціальні події jQuery. Ідея полягає в тому, щоб підписатися на тему/подію користувача і запустити функцію, яка додає подію. Звичайно, краще відфільтрувати ті елементи, які були ініціалізовані раніше. Я havent тест наступні коди але сподіваюся ви отримуєте ідею.

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
});
0
додано

Ви хочете, щоб перевірка всіх вибору здійснювалася під час завантаження Користувацького вибору або лише для вибору користувача? ...

$.post("./user_functions.php", {reason: "get_users", userID: uID}).done(function(data) {  
    $("#userSelector").html(data);
    //Then this:
    var currentSelectVal = $("#userSelector").val();
    alert(currentSelectVal);
});
0
додано
В основному тільки #userSelector. Але це не є великою проблемою зараз. Поки я можу звільнити подію, коли будь-який з них завантажиться, я буду щасливий.
додано Автор Einar Sundgren, джерело

Якщо вибрані елементи динамічно завантажуються, чому б не додати обробник подій після обробки відповіді?

напр. для 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
  },
  ...
});
0
додано
Я знаю. І моїм початковим питанням було те, чи є такий обробник подій, який запускається, коли елемент завантажується динамічно, а не на зміну або на перемикання курсору. Але я міг би створити його трохи нечітким.
додано Автор Einar Sundgren, джерело
Таким чином, він буде працювати, лише якщо елементи присутні у вихідному DOM. Ні, якщо вони додаються пізніше.
додано Автор Einar Sundgren, джерело
Для елементів, які вже знаходяться в DOM (при завантаженні сторінки), ви можете використовувати $ (document) .ready (function() {// на зміну події, наприклад $ ('. MySelectDOMselector'). ('change', function() {doMyEvent ();})}) Для динамічно завантажених елементів ви можете додати призначення обробника події на зворотній виклик успіху вашого виклику ajax-post.
додано Автор Michael Blancaflor, джерело
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram