没有发射

这里动态生成的折叠按钮事件是说明问题的一些的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!'); 
});

来源

2014-12-01 user3044258

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

你有3个解决方案：

添加你当前的事件，其工作
取出单击处理程序，在目前的工作需要的代码和移动代码到你的委托事件处理程序。
从第一个点击处理程序中删除stopPropagation。

就我个人而言，我会建议方法2，因为将只有1个点击处理程序需要覆盖所有可能添加到DOM的input元素。

来源

2014-12-01 18:22:58

你能否详细说明2如果可能？我在执行过程中并不完全清楚。谢谢 – user3044258 2014-12-01 18:36:17

我试了你的建议，但除非我误解，它仍然无法正常工作。 – user3044258 2014-12-01 18:43:36

如果我删除了可以工作的代码（或者删除stopPropogation等），它仍然不起作用。现在我会坚持使用可用的事件处理程序，并在稍后查看是否有解决方法。这个问题似乎与它动态生成的事实有关，它在可折叠标题内部，因为对于可折叠正文/内容中的任何元素，委托事件处理程序在那里工作得很好。 – user3044258 2014-12-01 18:55:42

在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防止你的“第二”事件烧制而成。（事件附加到输入元素的父元素）

您的“第一个”事件在可折叠事件之前触发，所以没有问题。

来源

2014-12-01 19:07:06 haul

是的，这是正确的，我也看过jquery移动代码，但我认为这不会解决任何问题。你可以看到在非动态生成的项目上，它工作得很好。我不确定你的评论是如何解决的，也许我只是需要更多的睡眠:) – user3044258 2014-12-01 19:46:48

回答

相关问题