0

在 jQuery Mobile 1.3.1 中单击或更改复选框时，我无法执行 jQuery 函数。我已经尝试了所有我知道的尝试，所以任何帮助将不胜感激。

这是html：

<form>
  <ul data-role="listview" data-split-icon="gear" data-split-theme="d">
    <li style="padding:0">
      <a href="#" style="padding:0">
       <fieldset data-role="controlgroup" class="task-container">
         <input type="checkbox" name="checkbox-v-2a" id="checkbox-1">
         <label for="checkbox-1" style="border: none;margin: 0">Task name</label>
       </fieldset>
      </a>
      <a href="#purchase">Purchase album</a>
    </li>
    .
    .
    .       
   </ul>
</form>

这是JavaScript（jQuery）：

$("#checkbox-1").change(function() {
  alert("hello world!");
});
4

1 回答 1

2

选项1

一个原因可能是因为您在元素已经存在之前对其进行了初始化。如果它位于设置为（它必须具有）的容器中，请尝试将您的事件包装change在一个事件中，如下所示：pageinitdata-rolepage

$(document).on("pageinit", "[data-role=page]", function () {
    $("#checkbox-1").change(function () {
        alert("hello world!");
    });
});

您的 HTML 可能/必须如下所示：

<div data-role="page" id="mypage">
    <div data-role="content">

     <!-- what you've typed in the question -->

   </div>
</div>

这是一个jsFiddle 演示：

选项 2

解决此问题的另一种方法是将此更改事件放在结束<body />标记处（就像这必须是 中的最后一个元素body）。更改no wrap in <head>为no wrap in <body>小提琴选项并看到它的工作:)

选项 3

尝试将事件绑定到文档或最直接的静态父级并从那里委派它：

  $(document).on("change", "#checkbox-1", function () {
      alert("hello world!");
  });
于 2013-06-18T05:16:24.287 回答