可折叠标题内的jQuery移动按钮

如果有人能帮助我，我真的很感激。 我正在尝试使用jQuery mobile 1.2 Beta（使用jQuery 1.7.1）动态构建可折叠块。

现在我有一个问题，我想在一个可折叠的标题内有一个按钮，一切正常，但当我点击按钮时，我设置的点击事件不会被触发，而是块被取消折叠或折叠。

$('#main').append('
' + '
' + header + ': ' + val.pflichtBezeichnung + ' (' + val.Intervall + ' - ' + val.IntModus + ') ' + val.pflichtNummer + '.' + val.pflichtZusatz + 'Ok
' + '
' $("#ok").live('click', function () { alert("ok"); }); 

我该怎么做才能获得按钮的点击事件？

谢谢你的帮助！

Answer 1

首先，你应该意识到.live已经被弃用了。

这就是要了解这里发生了什么，你需要了解事件委托如何工作，特别是live ，当你使用事件委托时，你将事件绑定到DOM中的更高级别（某些父元素），然后因为事件冒出来检查原始事件以查看它是否与指定的选择器匹配。

.live方法通过将事件绑定到document （因此它始终绑定到父元素）来工作，然后当事件冒泡到document它会检查它是否与指定的选择器匹配。 在您的情况下，问题是某些东西（可能是collapisple标题 ）吞噬了click事件，因此它永远不会到达文档。

解决方案非常简单，可以直接绑定到按钮，也可以委托DOM中的较低级别，即事件将到达的位置。

例如

 $('#inner_header_' + identifier).on('click', '#ok', function(e) { alert('ok'); }); 

如果您不希望标题在单击按钮时展开和折叠，只需停止事件进一步冒泡，您可以使用stopPropagation（）方法执行此操作

例如

 $('#inner_header_' + identifier).on('click', '#ok', function(e) { alert('ok'); e.stopPropagation() });