Когда отображается моя скрытая форма выбора, она не будет вызывать функцию JavaScript

Question

У меня есть скрытый элемент select с вызовом onchange функции javascript.

Когда пользователь нажимает кнопку на моей странице, я запускаю приведенный ниже код, и отображается моя форма выбора:

$("#moreDetails2").show();
$('#moreDetails2').trigger("create");

Однако после его показа он не будет выполнять свою функцию JavaScript. Я проверил это не скрыто, и это работает.

<div id = \"moreDetails2\">  
                    <select  onchange=\"moreDetails2($userID,'$id')\">

                        <option value=\"0\">More Options</option>
                        <option value=\"1\"> View Taste Profile</option>
                        <option value=\"2\"> Add Taste Tags</option>

                    </select>
                </div>

Глядя в элементе проверки в Chrome, я не получаю никаких ошибок.

Answer 1

jQuery Mobile плохо работает с привязкой событий onchange="... или onclick="..., вам нужно будет сделать это вручную следующим образом:

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '#test-button', function(){     
        $("#moreDetails2").show();
        $("#moreDetails2 select").css('display','block').selectmenu('refresh');
    });    

    $("#moreDetails2 select").on( "change", function(event, ui) {
        moreDetails2('aaaa');
    });    
});

function moreDetails2(text) {
    alert(text);
}

А вот рабочий пример jsFiddle, созданный из вашего кода: http://jsfiddle.net/Gajotres/DpdXY/

Answer 2

Использование того же имени, что и в качестве имени глобальной функции и идентификатора элемента, вызовет проблемы в Chrome, Safari и IE (не в Firefox).

Попробуйте изменить имя функции вашего обработчика событий на "moreDetailsTwo" или что-то в этом роде.

Chrome, Safari и IE создают глобальные символы (то есть window свойства) для каждого элемента со значением "id". Я подозреваю, что это мешает вашей привязке к функции "moreDetails2".