Question

我正在开发一个具有表格的移动应用程序，其中有一些无线电选项。这是为了我的学习目的。

背后的基本思想是应用程序将在单选按钮中采用四个物理活动名称，然后根据该名称将动态生成一个选择菜单。

我提出了一个解决方案，我将在单选按钮中使用练习名称，使用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>

Answer 1

与普通网页不同，jQuery Mobile中的单选按钮以不同的方式工作。由于隐藏了真实的单选按钮并显示了自定义按钮，因此必须使用更改事件而不是单击事件。如果可能的话，不要在jQuery Mobile中使用内联javascript onClick ，请使用jQuery执行此操作：

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

使用 jsFiddle 示例：http://jsfiddle.net/UEypE/

.onClick（）不适用于jQuery mobile

1 个答案: