停止传播不工作jquery mobile？答案

【问题标题】：stoppropagation not working jquery mobile?停止传播不工作jquery mobile？
【发布时间】：2014-08-25 10:49:36
【问题描述】：

stopPropagation 不适用于我的 JQuery Mobile 移动应用程序..

我的代码：

HTML：

<ul id="tmpl">
<li>
<div  class="favorite">
 <label>
   <input type="checkbox" name="sortList" class="checkboxGroup" data-role="none">
 <i></i>
</label>
</div>
</li>
</ul>

js:

$(document).on("vclick","#tmpl li",function(){
alert("li clicked");
});

$(document).on("vclick",".favorite i",function(e){
alert("checkbox clicked");
e.stopPropagation();
});

css:

input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] + i:before {
    content:'\e809';
    color:lightgray;
    font-family: "icon-font"; font-style : normal; text-shadow:none;
}
input[type="checkbox"]:checked + i:before {
    content:'\e809';
    color:red;
    font-family: "icon-font"; font-style : normal; text-shadow:none;
}

当尝试单击复选框时，当复选框被单击时，它会立即在单击时发出警报。但是只有当我尝试单击复选框时，我才需要复选框单击警报消息。

并且还尝试使用$(document).on("vclick", ".favorite", function(e) {}) 而不是$(document).on("vclick", ".favorite i", function(e) {});

这工作正常。但是这个方法在点击时会执行两次。

你能告诉我如何解决这个问题

库

jquery-2.1.1.min.js
jquery.mobile-1.4.3.min.js

【问题讨论】：

标签： jquery html css jquery-mobile checkbox

【解决方案1】：

我遇到了类似的问题，它通过使用 stopImmediatePropagation() 方法而不是 stopPropagation() 来解决。

请尝试使用

e.stopImmediatePropagation();

代替

e.stopPropagation();

【讨论】：

【解决方案2】：

您正在触发文档上的函数，这使得一直到 DOM 的顶部，然后向下搜索树。而是直接在元素上触发vclick 事件。

将您的代码更改为：

$("#tmp li").on("vclick",function(){
    alert("li clicked");
});

$(".favorite i").on("vclick",function(e){
    alert("checkbox clicked");
    e.stopPropagation();
});

另外，请查看DEMO

【讨论】：