Question

以下是一些说明问题的jsfiddle测试：

我做了更多测试，问题似乎是动态生成的可折叠标题中特定元素所独有的。

var input = content.find('input');       
input.on('click', function(e) {
   alert('this works as expected'); 
   e.stopPropagation();
   e.stopImmediatePropagation();      
});


$(document).on('click', 'input', function(e) {
    alert('this doesnt work???'); 
    e.stopPropagation();
    e.stopImmediatePropagation();      
});

一种简单的方法来确认这一点并不是专门针对动态生成的可折叠的，在标题内：

$(document).on('click', '*', function(e) {
      alert('will work anywhere except in dynamically generated collapsible header!'); 
});

Answer 1

它不起作用，因为工作的处理程序中包含stopPropagation，这会阻止事件冒泡到document。

你有3个解决方案：

将您需要的代码添加到当前的事件处理程序中
删除当前有效的单击处理程序，并将代码移动到委派的事件处理程序。
从第一个点击处理程序中删除stopPropagation。

我个人建议使用方法2，因为只需要一个点击处理程序来覆盖可能添加到DOM中的所有input元素。

Answer 2

jquery.mobile-1.4.4.js中可折叠内容的click事件如下所示（第6854行）：

"click": function( event ) {
                this._handleExpandCollapse( !ui.heading.hasClass( "ui-collapsible-heading-collapsed" ) );
                event.preventDefault();
                event.stopPropagation();
            }

还有另一个stopPropagation会阻止你的第二个＆＃34;射击事件。（事件附加到input元素的父元素）

你的第一个＆＃34;事件在可折叠事件之前触发，因此没有问题。

动态生成的可折叠按钮事件未触发

2 个答案: