Question

我无法在点击或更改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!");
});

Answer 1

选项1

一个原因可能是因为您在元素已存在之前初始化它。如果change事件位于pageinit设置为data-role（必须具有）的容器中，请尝试将page事件包装起来，如下所示：

$(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 Demo：

选项2

另一种解决方法是将此更改事件放在最后<body />标记处（这必须是body中的最后一个元素）。在小提琴选项中将no wrap in <head>更改为no wrap in <body>并查看其效果:)

选项3

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

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

将函数绑定到jQuery Mobile中的复选框

1 个答案: