为什么Div在onclick上消失？答案

【问题标题】：why Div fades on onclick?为什么Div在onclick上消失？
【发布时间】：2022-01-28 20:02:08
【问题描述】：

我想在单击编辑图标时显示一个选择框。使用我的代码，当我单击编辑图标时，选择框会出现并且它会在一秒钟内淡出。我该如何解决这个问题？

    <script src="<?php echo base_url() ?>Assets/js/jquery.min.js"></script>
    <script src="<?php echo base_url('vendor/select2/select2.min.js'); ?>"></script>

    <div id="wrapper">
       <div class="col-lg-6">
          <div class="form-group">
             <label>Material</label>
             <input type="text" value="<?php echo $row->ro_material;?>" class="form-control" readonly>
             <a href="" onclick="materialEditDiv();return false;"><i class="fas fa-edit"></i></a>
             </div>
          </div>
       <div class="col-lg-6" id="hidddenMaterial" >
           <select name="material" class="form-control">
             
          </select>
      </div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
    function materialEditDiv(){
                $('#hidddenMaterial').show();
            }
    $(document).ready(function(){
    $('#hidddenMaterial').hide();
    });
    </script>

编辑

<script src="<?php echo base_url() ?>Assets/js/jquery.min.js"></script>
<body onload="getData()">

 <div class="col-lg-6" id="hidddenMaterial" style="display:none;">
               <select name="material" class="form-control">
                 <option value="">Select</option>
                  <?php foreach ($material->result() as $rorow) : ?>
                     <option value="<?php echo $rorow->material_name;     ?>"><?php echo $rorow->material_name;   ?>
                 </option>
                     <?php endforeach; ?>
              </select>
          </div>

 <script type="text/javascript">
 function materialEditDiv(){
                    $('#hidddenMaterial').show();
                }
        $(document).ready(function(){
       /* $('#hidddenMaterial').hide();*/
        });
function getData(){
$('#hidddenMaterial').hide(); // tried commenting this line also
}
        </script>

https://jsfiddle.net/f4oj76d9/ - 代码 sn-p。请看一下。

【问题讨论】：

所提供的代码存在许多问题，例如两次加载jquery，加载jquery after select2（从而删除select2）以及将onclick 与js 事件混合。我建议您将 onclick=materialEditDiv 移动到您在 doc.ready 中分配的 js 事件中。如果您在文档完成加载之前单击编辑，那么您所描述的可能会发生，然后您现有的 doc.ready 会启动并隐藏它（但这不是“淡出”）删除@987654326 @ from doc ready 并在加载时隐藏 <div id='hiddenMaterial' style='display:none;'> - 你也不会得到 FOUC。
您能否提供一个演示问题的 sn-p（edit 并单击 [<>]）？您的provided code 原样似乎没有问题。
@freedomn-m 请查看更新后的问题。我试过像欧盟说的那样。但我仍然面临同样的问题。
@freedomn-m 似乎喜欢的页面正在重新加载。单击编辑图标后，选择框首先出现，然后消失，然后页面正在重新加载。我不确定我是否感觉它消失了，因为页面重新加载了。
好。到达某个地方。仔细观察调试器中的网络选项卡。可能是因为 <a href="" - 尝试将其更改为 <a href='#' 以停止页面重新加载 - 或将其更改为 <div onclick=..><i ..></i></div> 以完全删除 - 可能会更改样式，但一次一步。

标签： javascript php jquery css codeigniter

【解决方案1】：

委托点击事件怎么样？

HTML

<a href="#" class="toggleMaterial"><i class="fas fa-edit"></i></a>

$(document).delegate(".toggleMaterial","click",function(){ 
   $('#hidddenMaterial').toggle();
});

或者

$(document).on("click",".toggleMaterial",function(){ 
   $('#hidddenMaterial').toggle();
});

完整代码

<div id="wrapper">
       <div class="col-lg-6">
          <div class="form-group">
             <label>Material</label>
             <input type="text" value="<?php echo $row->ro_material;?>" class="form-control" readonly>
             <a href="#" class="toggleMaterial"><i class="fas fa-edit"></i></a>
             </div>
          </div>
       <div class="col-lg-6" id="hidddenMaterial" style="display:none">
           <select name="material" class="form-control">
             
          </select>
      </div>
    </div>

   <script type="text/javascript">
    $(document).on("click",".toggleMaterial",function(){ 
       $('#hidddenMaterial').toggle(); // shows on first click, hides on second
    });
    </script>

【讨论】：

我不明白我应该做些什么改变。我应该从materialEditDiv() 中删除$('#hidddenMaterial').show(); 吗？你能给出你的意思的完整代码吗？
查看更新的代码，无需编写内联函数调用
这个答案也达到了同样的情况。它在第一次单击时隐藏了选择框
不，不，hidddenMaterial 元素在加载时默认隐藏。 style="display:none" 通过此样式标记，已通过将 # 添加到 href 来修复重新加载