Javascript jQuery只需单击一次

在下面的代码中，我只能单击下面的HTML元素中的任何一个，从第二次单击开始，Loader元素就显示出来了，但没有显示任何内容。“所有”仅第一次起作用，第二次单击后不起作用。谁能帮我看看吗？谢谢

<li><a id="OVERALL_VALUE" href="javascript:void(0)" onclick="setTopDeals('OVERALL_VALUE')" class="topdeal">Top Deals</a></li>
                    <li><a id="PRICE" href="javascript:void(0)" onclick="setTopDeals('PRICE')" class="price">Price</a></li>
                    <li><a id="QUALITY" href="javascript:void(0)" onclick="setTopDeals('QUALITY')" class="quality">Star Rating</a></li>


                    <li><a id="list" href="javascript:void(0)" class="list">List View</a></li>
                    <li><a id="grid" href="javascript:void(0)" class="gallery">Gallery</a></li>
                    <li><a id="map" href="javascript:void(0)" class="map">Map View</a></li>

显示加载器

<a id="ajaxload_more3" style="display:none; width:200px; height:80px; border:1px solid #000; opacity:0.8; border-radius:10px; padding-top:20px; padding-bottom:25px; position:fixed; top:50%; left:50%; z-index:1000; text-align:center; background-color:#997CE6;"><table align="center"><tr height="50"><td><img src="images/ajaxload.gif" height="50" width="50" /></td></tr><tr height="35"><td><span style="font-size:20px; color:#FFF;">Loading</span></td></tr></table></a>

剧本

<script type="text/javascript">
        $( "#OVERALL_VALUE" ).click(function() {
          $( "#ajaxload_more3" ).show("slow");
          $("#ajaxload_more3").delay(6000).fadeOut("slow");
        });
        $( "#PRICE" ).click(function() {
          $( "#ajaxload_more3" ).show("slow");
          $("#ajaxload_more3").delay(6000).fadeOut("slow");
        });
        $( "#QUALITY" ).click(function() {
          $( "#ajaxload_more3" ).show("slow");
          $("#ajaxload_more3").delay(6000).fadeOut("slow");
        });
        $( "#list" ).click(function() {
          $( "#ajaxload_more3" ).show("slow");
          $("#ajaxload_more3").delay(6000).fadeOut("slow");
        });
        $( "#grid" ).click(function() {
          $( "#ajaxload_more3" ).show("slow");
          $("#ajaxload_more3").delay(6000).fadeOut("slow");
        });
        $( "#map" ).click(function() {
          $( "#ajaxload_more3" ).show("slow");
          $("#ajaxload_more3").delay(6000).fadeOut("slow");
        });
         </script>

---

天啊，你应该先考虑一下。所有的操作都是相同的，那么为什么要使用单独的选择器呢？而是直接使用类或元素选择器

 $( "li" ).on('click', 'a', function() {
          $( "#ajaxload_more3" ).show("slow");
          $("#ajaxload_more3").delay(6000).fadeOut("slow");
        });

---

尝试添加而不是javascript:void0，否则只需删除HREF属性，因为加载javascript后将动态加载DOM元素。。单击事件不会绑定到新的附加元素

在这种情况下，您必须使用On或Live绑定。不推荐使用Live binding，因此我建议您在绑定时使用

下面是Javascript的工作代码段替代方案。。试试看

<script type="text/javascript">
    $( "body" ).on("click", "#OVERALL_VALUE", function() {
      $( "#ajaxload_more3" ).show("slow");
      $("#ajaxload_more3").delay(6000).fadeOut("slow");
    });
   $( "body" ).on("click, "#PRICE", function() {
      $( "#ajaxload_more3" ).show("slow");
      $("#ajaxload_more3").delay(6000).fadeOut("slow");
    });
    //CONVERT ALL THE ELEMENTS JUST LIKE THAT
     </script>

我希望这有帮助。谢谢大家!

更好的方法

正如另一位成员所建议的。。不要重复你的话

相反。。将中的HTML转换为以下格式：

                 <li><a id="PRICE" class="ajaxLoadIt" href="javascript:void(0)" onclick="setTopDeals('PRICE')" class="price">Price</a></li>
                <li><a id="QUALITY" class="ajaxLoadIt" href="javascript:void(0)" onclick="setTopDeals('QUALITY')" class="quality">Star Rating</a></li>


                <li><a id="list" class="ajaxLoadIt" href="javascript:void(0)" class="list">List View</a></li>
                <li><a id="grid"class="ajaxLoadIt"  href="javascript:void(0)" class="gallery">Gallery</a></li>
                <li><a id="map" class="ajaxLoadIt"" href="javascript:void(0)" class="map">Map View</a></li>

还有剧本：

<script type="text/javascript">
$( "body" ).on("click", ".ajaxLoadIt", function() {
  $( "#ajaxload_more3" ).show("slow");
  $("#ajaxload_more3").delay(6000).fadeOut("slow");
});

//CONVERT ALL THE ELEMENTS JUST LIKE THAT
 </script>

---

您再也看不到它了，因为在淡出函数的末尾，DOM元素的显示为none。您应该添加自定义逻辑淡出过程完成后要做什么

如果您只想在Ajax请求处于活动状态时显示加载消息，请签出并保存文档。文档应该是文档我尝试了您的代码，但在www.ther8.com上仍然不起作用