JQuery UI手风琴，如何将一个按钮/链接到另一个函数的头。

I'm really getting mad about this issue and I would be glad to get a little bit help from you.

我真的对这个问题很生气，我很高兴能从你那里得到一点帮助。

I do have a JQuery accordion which is working fine. I like to put a X in the right corner of the header which then deletes the item from the list but I'm not able to do that. The header itself is within a <h3><a> HEADER </a></h3 tag. this is opening the conent. When I put another link to the header the accordion is not shown correctly. Is there a chance to put on another link/button, and if the user clicks on it I can catch it and delete the item?

我有一个JQuery手风琴很好用。我喜欢在标题的右上角放一个X它会从列表中删除条目但是我不能这么做。header本身位于

header

I tried another method, I put the button in a div in the content and tried to move it to the top via position: relative and -20px, but it's not shown, it's overwritten from the header, although I set the Z-INDEX to a higher value.

我尝试了另一种方法，我将按钮放在内容中的div中，并试图通过position: relative和-20px将其移动到顶部，但没有显示出来，它是从header中重写的，尽管我将z索引设置为更高的值。

Sounds like a very easy thing, and maybe I missed something... but I spent so many hours on this now and searched so many sites but was not able to solve it. Any help would be appreciated.

听起来很容易，也许我漏掉了什么……但我花了这么多时间在这上面，搜索了很多网站，却没能解决它。如有任何帮助，我们将不胜感激。

Thanks, Marcel

谢谢,烫发

3 个解决方案

#1

This helps me to put UI-button into UI-accordion header without interfere of events:

这有助于我将UI-button放入ui -手风琴头中，而不影响事件:

$( "#accordion" ).accordion({ header: "> div > .h3" });
$( "#check" ).button();
$( "#check-label" ).click(function(event){
    event.stopPropagation(); // this is
    event.preventDefault(); // the magic
    log("clicked!");
});

<div id="accordion">
    <div>
        <div class="h3">
            <div class="right-button">
                <input type="checkbox" id="check" /><label for="check" id="check-label"></label>
            </div>
            <a href="#">First</a>
        </div>
        <div>
            <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>

        </div>
    </div>
    <div>
        <div class="h3">
            <a href="#">Second</a>
        </div>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <div class="h3">
            <a href="#">Third</a>
        </div>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>

#2

An older post, but for those looking, this is what I ended up doing is creating a block inside of the h3 header. Then I added the class called toolbar to the block. Then used the jquery selector to get all the anchors inside of the blocks with the toolbar class and bind the click event of each. Inside the click event, I used the current elements href attribute to set the window.location value to force the browser to the page I wanted to navigate to. In this instance it is an edit and delete page.

一个旧的帖子，但是对于那些看的人，这是我最后做的是在h3头中创建一个块。然后我将名为toolbar的类添加到这个块中。然后使用jquery选择器将所有的锚点放到工具栏类中，并绑定每一个的单击事件。在单击事件中，我使用当前元素href属性设置窗口。位置值强制浏览器到我要导航到的页面。在这个实例中，它是一个编辑和删除页面。

<div id="accordion">
   <h3>Header 1
   <span style="float:right;" class="toolbar ui-widget-header ui-corner-all">
     <a href="/EditPage.html">Edit</a>
     <a href="/DeletePage.html">Delete</a>
   </span>
   </h3>
   <div>
    Content 1
   </div>
   <h3>Header 2
   <span style="float:right;" class="toolbar ui-widget-header ui-corner-all">
     <a href="/EditPage.html">Edit</a>
     <a href="/DeletePage.html">Delete</a>
   </span>
   </h3>
   <div>
    Content 2
   </div>
</div>

<script type="text/javascript">
 $("#accordion").accordion();

 $(".toolbar a").live("click", function() { 
  window.location($(this).attr("href")); 
 }); 
</script>

#3

It's possible that the other answers worked at some time, and may have worked in certain circumstances.

其他答案可能在某些时候起作用，在某些情况下也可能起作用。

I've found instead that it works to use a combination of the two approaches, with modern jQuery and Javascript. Where I've put in a set of links into a list of job postings, and the links are all in the 'applyNowLink' class:

相反，我发现将这两种方法结合使用，使用现代jQuery和Javascript是可行的。我把一组链接放到了一个招聘信息列表中，链接都在“applyNowLink”类中:

$( ".applyNowLink" ).on("click", null, null, function(event) { 
      window.location.href = $(this).attr("href"); 
      event.preventDefault(); 
 });

Works for me. Not preventing the default action caused two email windows to open (the href is a mailto:)

为我工作。未阻止默认操作导致两个电子邮件窗口打开(href是mailto:)

#1