Как правильно добавить <select>на страницу с помощью jquery и позволить событию изменения работать?

Question

В настоящее время у меня есть несколько выборок на странице, которые динамически добавляются с помощью вызовов ajax с использованием jquery.

Проблема, с которой я столкнулся, заключается в том, что я не могу заставить событие изменения работать с добавленным выбором, если я не использую onchange внутри тега, например,

<select id="Size" size="1" onchange="onChange(this);">

Это работает, но мне интересно, есть ли способ заставить его быть назначенным jquery. Я пытался использовать $('select').change(onChange($(this)); в обычном месте $ (document). Уже, но это не сработало.

Я пытался добавить событие с bind после вызова ajax, но это тоже не сработало.

Есть ли лучший способ назначить событие?

Answer 1

$ ( 'выбрать') изменить (OnChange ($ (это)).

Вы должны понимать разницу между вызовом функции и передачей ее как объекта. Функции являются первоклассными объектами в JavaScript, они являются объектами, как и все остальное, поэтому их можно хранить в переменных, передавать в качестве аргументов другим функциям и т. Д.

Код, который у вас есть, вызывает функцию onChange и передает результат в функцию изменения jQuery. Вы этого не хотите. Идея состоит в том, чтобы передать саму функцию в функцию изменения jQuery, и jQuery вызывает ее, когда это уместно.

Если у вас есть скобки - () - после имени функции, то вы вызываете ее. В противном случае вы рассматриваете это как объект. То, что вы намереваетесь сделать, может быть выполнено так:

$('select').change(onChange);

Answer 2

У меня была похожая проблема, и я нашел это решение здесь :

Когда вы делаете что-то вроде этого:

$('p').click( function() { alert('blah'); } ) 

Все , существующие в настоящее время 'p' элементы будут иметь обработчик кликов прилагается. Теперь, если вы продолжите добавлять другие элементы «р» на странице они не будет иметь обработчик вашего клика, прикрепленный к ним. Ты бы нужно "перезапустить"

$('p').click( function() { alert('blah'); } )

на новых элементах для прикрепления обработчики им.

Вы можете посмотреть на Плагин "LiveQuery" как есть все недавно добавленные элементы, чтобы они ранее прикрепленные обработчики прикреплен к ним, когда они добавлены на страницу.

Карл Радд

Таким образом, после добавления выбора вам придется повторить вызов change ().

Answer 3

Спасибо, ребята, за помощь, ответы сработали, но не за то, что я делал. Я наконец понял это, используя firebug. Я пытался назначить событие change до того, как ajax закончил работу (я новичок в этом ajax, как вы могли заметить).

Я добавил событие, присваивающее обратный вызов в load (), и теперь все это прекрасно работает.

        $(this).load('ploc002.php', {JobNumber: JobNumber, Edit: this.id}, function()
        {
            // The DOM has been changed by the AJAX call
            // Now we need to reassign the onchange events
            $('select,input').change( function()
            {
                onChange(this)
            });
        });

Answer 4

После добавления выбора на страницу вам нужно добавить событие изменения к нему:

$('#newSelect').change(
    function() 
    { 
        onChange(this)
    }
);

Если все ваши селекторы имеют одинаковый класс, лучше сначала отменить привязку, а затем выполнить повторную привязку:

$('.classname').unbind("change");
$('.classname').change(
    function() 
    { 
        onChange(this)
    }
);