Jquery 移动点击事件不起作用 - DOM Prob？答案

【问题标题】：Jquery mobile click event not working - DOM Prob?Jquery 移动点击事件不起作用 - DOM Prob？
【发布时间】：2012-06-07 08:19:50
【问题描述】：

尝试了这个最新的一组代码的一些组合。简而言之，我将我的 javascript 从一个单独的文件运行到 html，我要做的就是设置一些代码来观察复选框何时更改为在其上运行一些逻辑。

尝试通过 .document.userdetails.signal、#signal（为此添加了类）和普通信号进行观看。

我希望得到一些指导，因为我在同一个 html 文件中查看了许多示例，这就是为什么我认为这是我尝试处理按钮的方式。

<form id="userdetails" name="userdetails" action="javascript: savesettings()" >
       <p>
        <p>
        <div data-role="fieldcontain">
          <fieldset data-role="controlgroup" data-type="horizontal">
            <input name="signal" type="checkbox" class="custom" id="signal" value="1" checked="true" />
            <label class="signal" for="signal">Traffic Data</label>
            </legend>
</div>

还有 Javascript

   $(".document.userdetails.signal").click(function(e){
   e.preventDefault();
   alert('signal clicked!');
});

谢谢

人族

编辑 - 上次使用此示例 - Click event not firing in jQuery Mobile?

EDIT2 - http://forum.jquery.com/topic/calling-a-script-when-button-clicked 添加了 $(document).ready 所以现在 $(document).ready(".document.userdetails.signal").click(function(e){........ 似乎当我打开应用程序时注意到变化 - 我想我现在需要找到正确的目标，因为 Jquery 重新创建了复选框等。

EDIT 3 - Jasons 解决方案，尽管来自目标周围其他贡献者的 cmets 很有用。

$(function() {
   $("#userdetails").on("change","#signal",function(eventObj) {
        //do code here. 
        eventObj.preventDefault();
   });
});

【问题讨论】：

标签： jquery checkbox click

【解决方案1】：

click 事件适用于复选框，但通常如果您想在更改时运行 javascript，请改用change 事件。我已经包含了一个使用 change 的示例，以防您想复制粘贴选择框或文本字段的代码

$(function() {
   $("#userdetails").on("change","#signal",function(eventObj) {
        //do code here. 
        eventObj.preventDefault();
   });
});

..编辑以回应评论..

    $(function () {
        $("#trafficdata").toggle(function () {
            alert('First handler for .toggle() called.');
        }, function () {
            alert('Second handler for .toggle() called.');
        });


        $("#userdetails").on("click", "#signal", function (eventObj) {

            eventObj.preventDefault();

            $("#trafficdata").click();

        });
    });

【讨论】：

杰森 - 工作谢谢....出于兴趣（并且已经尝试过）允许以这种方式使用切换 - 即 $(function() { $("#userdetails") .on("toggle","#trafficdata",function(eventObj) { eventObj.preventDefault(); alert('调用 .toggle() 的第一个处理程序。'); }, function() { e.preventDefault(); alert('调用 .toggle() 的第二个处理程序。'); }); }); - 匆匆忙忙，没有任何乐趣，所以我假设按照您建议的格式使用的事件数量有限？
我已经用我认为你想做的事情更新了代码。基本上我已经在流量数据上定义了一个切换功能，当点击 userdetails 时，切换功能在不同的 div 上执行
这不是一个很好的例子，我没有足够的信息来说明你想做什么，如果你能做一个 jsfiddle 我可以帮你。
Jason - 谢谢你，我会看看.....目前我正在尝试将一些逻辑放在 JQM 中使用的按钮后面......我目前正在自学所以我'我仍然了解您的示例真正有用的一些基础知识。出于某种原因，这些按钮似乎比我可以阅读然后刷新的滑块更难，但我想这就是乐趣的一部分:)
Jason - 只是简短地表示感谢 - 切换脚本就像一个魅力。 T

【解决方案2】：

$(".document.userdetails.signal") 正在寻找具有三个类的元素，例如 class="document userdetails signal"。

试试$("#signal")：

$(function() { // shorthand for doc ready
    $(document).on('click','#signal',function(e) { // use .on in jquery 1.7
        alert('hello');
        e.preventDefault();
    });
});

【讨论】：

反引号 ` 格式化内联代码，Ctrl+K 格式化代码块 :)