单击以使用jQuery显示结果

I'm using this code;

if ($forum['type'] != 'c' && !$forum['linkto'] && $forum['posts'])
{
    $forum['collapsed_image'] = '<div class="expcolimage"><a href="javascript:void(0);" id="forum_name" fid="'.$fid.'" title="Double click here to see latest threads of this section."><img src="images/collapse_collapsed.gif" id="ann_'.$forum['fid'].'_img" class="expander" alt="[-]" title="[-]" /></a></div>';
}
else
{
    $forum['collapsed_image'] = '';
}

And here is my jquery code;

jQuery(document).ready(function($){
  $('a[id^="forum_name"]').on('click', function (e){
        e.preventDefault();
        var fid = $(this).attr("fid");
        $.ajax(
        {
            type : "post",
            dataType: "html",
            url : "misc.php?action=forum_threads&fid="+fid,
            cache: false,
            success : function(response)
            {
                $("#forum_threads_"+fid).stop().slideToggle("fast").html(response);
            }
        });
  });
});

Now what it does is when you DOUBLE click on the link above then the jquery code runs and show the results. Instead of this I want to make it so I can only click ONCE to run the jquery code to show the results. How to make it happen?

Thanks!

$forum['collapsed_image'] = '<div class="expcolimage"><a  id="forum_name" fid="'.$fid.'" title="Double click here to see latest threads of this section."><img src="images/collapse_collapsed.gif" id="ann_'.$forum['fid'].'_img" class="expander" alt="[-]" title="[-]" /></a></div>';

remove href="javascript:void(0);" from anchor tag

$(document).ready(function() {
      $('a[id^="forum_name"]').click(function(event){

http://jsfiddle.net/mjsppovq/3/,

The code runs on single click, make sure that you haven't any other js code interfering with id starting with forum_name

<div class="expcolimage"><a href="javascript:void(0);" id="forum_name_123" fid="123" title="Double click here to see latest threads of this section."><img src="images/collapse_collapsed.gif" id="ann_123_img" class="expander" alt="[-]" title="[-]" /></a>

jQuery(document).ready(function($){
  $('a[id^="forum_name"]').on('click', function (e){
    e.preventDefault();
    var fid = $(this).attr("fid");
    console.log(fid);
    $.ajax(
    {
        type : "post",
        dataType: "html",
        url : "misc.php?action=forum_threads&fid="+fid,
        cache: false,
        success : function(response)
        {
            $("#forum_threads_"+fid).stop().slideToggle("fast").html(response);
        }
    });
  });
});

use inspect to view console.log output