javascript - add click event to Jquery UI accordian Header - Stack Overflow

admin管理员组

文章数量:1203388

When you create a Jquery UI accordian you get a bunch of headers, that when you click them a div opens. However, I would like to preform an additional action upon clicking the header.

How do i do this?

Any ideas?

Thanks!

When you create a Jquery UI accordian you get a bunch of headers, that when you click them a div opens. However, I would like to preform an additional action upon clicking the header.

How do i do this?

Any ideas?

Thanks!

• javascript
• jquery
• html
• jquery-ui

Share Improve this question Follow edited Dec 20, 2010 at 19:05 Nick Craver 630k138138 gold badges1.3k1.3k silver badges1.2k1.2k bronze badges asked Dec 20, 2010 at 18:06 kralco626kralco626 8,6244141 gold badges115115 silver badges171171 bronze badges 2

• If you have both of the HTML statements provided in the same page, then your HTML is invalid as IDs are suppose to be unique. If not please clarify. – John Hartsock Commented Dec 20, 2010 at 18:09
• No, those were two different attempts. I was making another stupid mistake. I posted the correct answer below. Thanks anyways, sorry. – kralco626 Commented Dec 20, 2010 at 18:10

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 10

Javascript

$("#CreateNewUserHeader").click(function() {
    alert("test");
});

html

<h3 id = "CreateNewUserHeader"><a >Create New User</a></h3>
<div>some stuff</div>

You need to wrap your code in ready handler:

$(function(){
  $("#CreateNewUserHeader").click(function() {
    alert("test");
  });
});

Also make sure that you do not assign same id to more than one elements.

What I've done when I needed to do this in the past was something like this:

$('#accordion h3 a').bind('click', function (e) {
  // bind to the the header / anchor clicks
  if (!condition) {
    e.preventDefault();
    e.stopPropagation();
  }
});

You guys should read the documentation, there is an event handler that will do it all for you.

https://api.jqueryui.com/accordion/#event-activate

$( ".selector" ).accordion({
  activate: function( event, ui ) {}
});

本文标签： javascriptadd click event to Jquery UI accordian HeaderStack Overflow