Question

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

现在我遇到了一个问题，我希望在可折叠标题中有一个按钮，一切正常，但是当我点击按钮时，我设置的点击事件不会被触发，而是块被取消或折叠。 / p>

$('#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");
              });

要获取按钮的点击事件，我该怎么办？

感谢您的帮助！

Answer 1

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

那就是要了解这里发生了什么，你需要了解事件委托的工作方式，尤其是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()
});

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

1 个答案: