单击以使用 jQuery 显示结果答案

【问题标题】：Single click to show results using jQuery单击以使用 jQuery 显示结果
【发布时间】：2014-08-14 11:49:26
【问题描述】：

我正在使用此代码；

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'] = '';
}

这是我的 jquery 代码；

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);
            }
        });
  });
});

现在，当您双击上面的链接时，它的作用是运行 jquery 代码并显示结果。我不想这样做，所以我只能单击一次来运行 jquery 代码以显示结果。如何实现？

谢谢！

【问题讨论】：

你用e.preventDefault()做什么？
@Arun：代码很好，我问怎么弄，一键就可以让代码运行而不是点击两下？？
@user2854563 因为你不需要它。如果您删除 href 属性，您也不会被重定向。

标签： javascript php jquery slidetoggle

【解决方案1】：

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

代码一键运行，确保没有其他js代码干扰以forum_name开头的id

<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);
        }
    });
  });
});

使用inspect查看console.log输出

【讨论】：

感谢 idwaker，但它只需单击两次即可运行，而不是一次

【解决方案2】：

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

【讨论】：

【解决方案3】：

$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>';

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

【讨论】：

清理浏览器缓存运行后通知我
仅用于检查删除 e.preventDefault();
尝试清除缓存同时删除 e.preventDefault(); 没有任何效果
您还缺少其他东西。不在此代码中。并停止投票
在外部 div 中绑定所有这些事件。或者在锚标签之间写一些东西。我觉得你的 a 标签太小了