3

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

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

$('#main').append('<div data-role="collapsible" data-theme="c" data-content-theme="c" id="pflicht_' 
+ identifier + '" pflichtID="' + val.guid + '">' +
'<h3 style="white-space: normal;" id="inner_header_' + identifier + '">' 
+ header + ': ' + val.pflichtBezeichnung + ' (' + val.Intervall + ' - ' + val.IntModus + ') ' 
+ val.pflichtNummer + '.' + val.pflichtZusatz + 
'<button type="button" data-inline="true" id="ok" pflichtID="' 
+ val.guid + '" identifier="' + identifier + '" >Ok</button></h3>' +
'</div>'

$("#ok").live('click', function () {
                  alert("ok");
              });

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

谢谢你的帮助！

4

1 回答 1

4

首先，您应该意识到.live已弃用on。

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

该.live方法通过将事件绑定到document（因此它始终绑定到父元素）来工作，然后当事件冒泡到 时，document它会检查它是否与指定的选择器匹配。您的问题是某些东西（可能是collapisple header）正在吞噬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()
});
于 2012-09-14T14:12:42.673 回答