.onClick() не работает на jQuery mobile

Я разрабатываю мобильное приложение, которое имеет форму и в нем есть некоторые варианты радио. Это для моей цели обучения..onClick() не работает на jQuery mobile

Основная идея заключается в том, что приложение будет принимать четыре имени физической активности в переключателях, а затем в соответствии с этим именем будет вызывать меню выбора динамически.

Я придумал решение, в котором я возьму имя упражнения в переключателях, и используя onClick() изменит меню выбора. Но, к сожалению, onClick не работает. Я обыскал в сети расходы достаточного количества времени, но я не нашел понятного решения.

Так что, мне нужна ваша помощь. Ниже мой код. Если вы можете придумать решение, то, пожалуйста, направить меня, а также указать, как и почему ваш код работает здесь!

<!DOCTYPE html> 
<head> 
    <script type="text/javascript"> 


    function COptions(){ 
    alert("hello World!"); 
     //document.writeln("Hello World!"); 
    } ; 


    </script> 

    <script> 
      try { 

    $(function() { 

    }); 

    } 
    catch (error) { 
    console.error("Your javascript has an error: " + error); 
    } 
     </script> 

</head> 
<body> 
    <div data-role="page" data-control-title="Home" id="page1"> 
     <div id="header" data-theme="a" data-role="header"> 
      <h3 id="header_txt"> 
       Calorie Burned 
      </h3> 
     </div> 
     <form name="form" id="form"> 
     <div data-role="content"> 
      <div class="form-input" data-role="fieldcontain" data-controltype="textinput"> 
       <label for="textinput2"> 
        Weight 
       </label> 
       <input name="weight" id="textinput2" placeholder="Enter weight (in lbs) " value="" data-mini="true" 
       type="number"/> 
      </div> 
      <div id="exercise_type" data-role="fieldcontain" data-controltype="radiobuttons" > 
       <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"> 
        <legend> 
         Choose Type of Exercise: 
        </legend> 
        <input id="radio1" name="exercise_type" value="" type="radio" onClick = "COptions()" > 
        <label for="radio1"> 
         Walking 
        </label> 
        <input id="radio2" name="exercise_type" value="running" type="radio" onClick = "COptions()" > 
        <label for="radio2"> 
         Running 
        </label> 
        <input id="radio3" name="exercise_type" value="cycling" type="radio" onClick = "COptions()" > 
        <label for="radio3"> 
         Cycling 
        </label> 
        <input id="radio4" name="exercise_type" value="swimming" type="radio" onClick = "COptions()" > 
        <label for="radio4"> 
         Swimming 
        </label> 

       </fieldset> 
      </div> 
      <div data-role="fieldcontain" data-controltype="selectmenu"> 
       <label for="intensity"> 
        Intensity: 
       </label> 
       <select id="intensity" name="intensity" data-mini="true"> 
        <option value="option1"> 
        </option> 
       </select> 
      </div> 
      <input class="button" data-icon="arrow-d" data-iconpos="top" value="Submit" 
      data-mini="true" type="submit"> 
     </div> 
     <div id="footer" data-theme="a" data-role="footer" data-position="fixed"> 
      <h3 id="footer_txt"> 
       A simple calorie calculator 
      </h3> 
     </div> 
    </div> 
</body> 
</html>

источник

2013-07-16 prodhan

пола колонов может быть, что говорит отладчик? –

Если я запустил это работает http://jsbin.com/owivof/1/edit, что не так? – baynezy

Возможно, вы захотите использовать делегирование событий. Использовать («щелчок»). Вы сохраните количество раз, когда вы добавляете onclick. Просто примечание. – krishgopinath

В отличие от обычных веб-страниц, переключатели в jQuery Mobile работают по-другому. Поскольку реальные переключатели скрыты и отображаются пользовательские, вместо события click нужно использовать событие изменения. Кроме того, если это возможно, не используйте встроенный Javascript onClick с JQuery Mobile, сделать это с помощью JQuery, как это:

$(document).on('pagebeforeshow', '#page1', function(){ 
    $(document).on('change', '[name="exercise_type"]', function(){ 
     alert("hello World!"); 
    }); 
});

Рабочей jsFiddle примера: http://jsfiddle.net/UEypE/

источник

2013-07-16 07:19:24 Gajotres

.onClick() не работает на jQuery mobile

ответ

Смежные вопросы