How to make only specific text that can be clicked on the header of an accordion - jquery?

Question

I have added a delete and edit link to the title of the accordion, but these links do not work, since every time I click on them, the accordion opens. And tips on how I can do this? Please note that I am doing a nested accordion. so i defined it on js:

$("#acc2").accordion({  alwaysOpen: false,active: false,autoheight: false,
            header: 'h3.ui-accordion2-header',clearStyle: true,
             event: 'click' });

and in html for me it looks like this:

<div class="ui-accordion2-group">
  <h3 class="ui-accordion2-header">
  <table border=0 width=100% class= 'DarkGray12'  >
    <tr>
      <td>
      <a href="javascript:toggel_new_activity('1');">Section Title</a>
      </td>
      <td align='right'>
        <table border=0>
          <tr>
            <td>
              <a href="javascript:toggel_new_activity('1');">New Activity</a>
            </td>
            <td>
              <a href='#'>Edit</a>
            </td>
            <td>
              <a href='#'>Delete</a>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  </h3>
</div>

Answer 1

First, get rid of these tables in h3. Use divs with css:

<style>
.ui-accordion2-header .tools{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 345px;
}
.ui-accordion2-header .tools a {
    width: auto;
    display: inline;
}
</style>
<div id="accordion" class="ui-accordion2-group">
    <h3 class="ui-accordion2-header" data-sectionid="1">
        <a href="#">Section Title</a>
        <div class="tools">
            <a href="#" class="newactivity">New Activity</a>
            <a href="#" class="edit">Edit</a>
            <a href="#" class="delete">Delete</a>
        </div>
    </h3>
    <div>
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</p>
    </div>    
</div>

Secondly, there is no need to add events to the line up, top:

<script type="text/javascript">
$(function() {
$("#accordion").accordion({
    alwaysOpen: false,
    active: false,
    autoheight: false,
    clearStyle: true
}).find('.tools a').click(function(ev){
    ev.preventDefault();
    ev.stopPropagation();
    var $obj = $(this);
    var sectionid = $obj.closest('h3').attr('data-sectionid');
    if ($obj.hasClass('newactivity')){
        toggel_new_activity(sectionid);
    } else if ($obj.hasClass('edit')){
        edit(sectionid);
    } else if ($obj.hasClass('delete')){
        delete(sectionid);
    }
});
});
</script>

ev.preventDefault() , , "a". ev.stopPropaggation() click

, .