Question

摘要：

使用jQuery和jQuery mobile以及tr标签内的单选按钮时出现问题。
A：单击无线电的事件处理程序，B：单击tr的事件处理程序
使用单选按钮时，B-> A（tr.click然后radio.click）
当使用其他元素时，A（a.click然后传播停止 API）

环境：

jQuery 1.11.3
jQuery Mobile 1.4.5
在Firefox 43.0上运行

详细说明：

嗨，

我在jQuery mobile中尝试处理click事件时遇到了一个问题，因为当使用一个表格标签时，我会使用一个无线电元素。下面的html代码显示了DOM元素的外观。您可以看到收音机位于th标签内，当然它位于表头标签内。（#order_title）

    <table class="w3-table w3-bordered w3-striped w3-border w3-hoverable" id="order_list" >
    <tr class="order_title" order_id="1">
        <th>a</th>
        <th>b</th>
        <th>
            <fieldset data-role="controlgroup" data-type="horizontal">
                <input name="sumshare_switch1" id="viewsum1" class="button_viewsum" type="radio" checked>
                <label for="viewsum1"> summary </label>
                <input name="sumshare_switch1" id="calshare1" class="button_calshare" type="radio">
                <label for="calshare1"> calculate </label>
            </fieldset>
        </th>           
    </tr>
    </table>

我使用order_title限制了两个点击事件，如下所示：

$('.button_calshare').on( "click", function(e){   
 //do something(A)
 e.stopImmediatePropagation();
});

$('.order_title').on("click", function(e){  
    //do something(B)
});

我预计当用户点击“button_viewsum”类的单选按钮时，它应首先从$（'。button_calshare'）触发事件，然后由stopImmediatePropagation函数停止。预期结果仅为“某事（A）”。

但是，当我测试它时，结果是“某事（B） - ＆gt;某事（A）”

我搜索了这个问题，然而，我发现在jQuery中，事件应该像我预期的那样冒出来。

我目前的解决方案是使用“a”标签来取代收音机

<fieldset data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-transition="fade" class="button_viewsum ui-btn-active" order_id="1">a</a>
    <a href="#" data-role="button" data-transition="fade" class="button_calshare" >b</a>
</fieldset>

并且事件开始冒泡而不是捕获！（也就是说，只有“Something（A）”发生了，B被stopPropagation函数停止了！）

虽然我的实现问题已经解决，但我真的很想知道为什么单选按钮不能像我预期的那样工作。

提前致谢！

JQuery就好像它遍历DOM树一样捕获

0 个答案: