可折叠标题内的jQuery移动按钮 [英] jQuery mobile button inside collapsible header

问题描述

如果有人能帮助我，我会很感激。我试图用jQuery mobile 1.2 Beta（使用jQuery 1.7.1）动态构建一个可折叠块。

现在我遇到了问题，我想在里面放一个按钮一个可折叠的标题和所有工作正常，但是当我点击按钮时，我设置的点击事件不会被解雇，而是块被取消折叠或折叠。

  $（'＃main'）。append（'< div data-role =collapsibledata-theme =cdata-content-theme =cid =pflicht_'
 + identifier +''pflichtID =''+ val.guid +'>'+ 
'< h3 style =white-space：normal;id =inner_header_+ identifier +' >'
 + header +'：'+ val.pflichtBezeichnung +'（'+ val.Interval +' - '+ val.IntModus +'）'
 + val.pflichtNummer +'。' + val.pflichtZusatz + 
'< button type =buttondata-inline =trueid =okpflichtID ='
 + val.guid +'identifier ='+标识符+'>好< /按钮>< / h3>'+ 
' < / div>'
 
 $（＃ok）。live（'click'，function（）{
 alert（ok）; 
}）; 
  

我必须做些什么来获得按钮的点击事件？

感谢您的帮助！

解决方案

首先，您应该认识到 .live 已被弃用，转而支持 。

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

.live 方法通过将事件绑定到文档来工作（所以它始终绑定到父项元素），然后当事件冒泡到文档时，它会检查它是否与指定的选择器匹配。在你的情况下，问题是某些东西（可能是 collapisple header ）吞噬点击事件，所以它永远不会到达文档。 p>

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

例如

  $（'＃inner_header_'+标识符）.on（'click'， '#o​​k'，函数（e）{
 alert（'ok'）; 
}）; 
  

如果您不想在单击按钮时展开和折叠标题，请停止您可以使用 stopPropagation（）方法进行进一步冒泡活动

例如

  $（'＃inner_header_'+ identifier）.on（'点击'，'#ok'，函数（e）{
 alert（'ok'）; 
 e.stopPropagation（）
}）; 
  

I would really appreciate if somebody could help me. I am trying to dynamically build a collapsible block with jQuery mobile 1.2 Beta (using jQuery 1.7.1).

Now I have the problem that I want to have an button inside a collapsible header and all works fine but when I click on the button the click event I set on it is not fired but instead the block gets uncollapsed or collapsed.

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

What do I have to do to get the click event of the button?

Thanks for your help!

解决方案

First off you should realize that .live has been deprecated in favor of on.

That said to understand what's going on here you need to understand how event delegation works in general and live in particular, when you use event delegation you bind your event to a higher level in the DOM (some parent element) and then because events bubble up you check the originating event to see if it matches the specified selector.

The .live method works by binding the event to the document (so it is always bound to a parent element) and then when an event bubbles up to the document it checks to see if it matches the selector specified. The issue in your case is that something (probably the collapisple header) is swallowing up the click event so that it never reaches the document.

The solution is pretty simple, either bind directly to the button, or delegate to a lower level in the DOM, somewhere where your event will reach.

For example

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

If you don't want the header to expand and collapse when you click the button, just stop the event from bubbling up further, which you can do using the stopPropagation() method

For example

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

这篇关于可折叠标题内的jQuery移动按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！