Question

在下面的代码中，我只能点击<a></a>中的Loader元素在第二次点击时显示的任何以下HTML元素，而不显示任何内容。所有这些仅适用于第一次，而不是第二次点击。任何人都可以找我吗？感谢。

<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>

Answer 1

天哪，你应该首先考虑Don't repeat yourself。所有人都在做同样的操作然后为什么单独的选择器？而是使用class或直接元素选择器

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

Answer 2

由于您正在动态加载DOM元素（AFTER LOADING Javascript）.. Click事件未绑定到新的附加元素..

在这种情况下，您必须使用“开”或“实时”绑定。不推荐使用实时绑定，因此我建议您使用“on”绑定...

以下是您的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>

Answer 3

尝试添加“＃”而不是“javascript：void（0）”，否则只需删除HREF属性

Answer 4

您不再看到它了，因为在fadeOut函数结束时，DOM元素的display为none。您应该在淡出过程完成后添加自定义逻辑

jQuery只点击一次

4 个答案: