如何动态地隐藏动态创建的div标签？

对不起，我仍然是新的使用jQuery，所以这可能是一个简单的问题。我试图设置一个带有表格的div标签，并带有一个隐藏div标签的按钮。我想出了如何让它为每个div标签使用id标签，但我需要的东西更像是一个可以处理无限按钮的类（至少有100个）。这是我试过的。我把javascript代码放在动态返回的代码中。按钮1工作，按钮5 6显示，但他们不工作。如何动态地隐藏动态创建的div标签？

如果你有一分钟我正确的方向，请看看。

感谢

code.html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> //<![CDATA[ 
    $(document).ready(function() { 
     $("#remove0").click(function() { 
      var checkattrib = $(this).attr("src"); 

      if (checkattrib != "ajax-loader.gif") { 

       $(this).attr("src", "ajax-loader.gif"); 
       mytimer0 = setTimeout(delayme0,1000); 

      } else { 

       $(this).attr("src", "req/icons/icon_checknotok.gif"); 
       clearTimeout(mytimer0); 

      } 
      return false; 
     }); 
     function delayme0() { 
      $("#alert0").hide(); 
      $.post("update.php", { mydata: "654321" }, 
       function(data) { 
        document.getElementById("dynamiccode").innerHTML=data; 
       }); 
      return false; 
     } 

     $("#remove1").click(function() { 
     var checkattrib = $(this).attr("src"); 

     if (checkattrib != "req/icons/icon_waitani.gif") { 

      $(this).attr("src", "req/icons/icon_waitani.gif"); 
      mytimer1 = setTimeout(delayme1,1000); 

     } else { 

      $(this).attr("src", "req/icons/icon_checknotok.gif"); 
      clearTimeout(mytimer1); 

      } 
      return false; 
     }); 
     function delayme1() { 
      $("#alert1").hide("clip", 1000); 
      $.post("update.php", { mydata: "445566" }); 
      return false; 
     } 


    }); 
    //]]> 
    </script> 

</head> 

<body> 

<div id='alert0'> 
      <table><tr><td> 
       Button 1: <input type="image" title="Remove Alert" src="req/icons/icon_checknotok.gif" value="" id="remove0" /> 
      </td></tr></table> 
</div> 
<div id='alert1'> 
      <table><tr><td> 
       Button 2: <input type="image" title="Remove Alert" src="req/icons/icon_checknotok.gif" value="" id="remove1" /> 
      </td></tr></table> 
</div> 
</form> 
<div id='dynamiccode'></div> 
<br />

update.php

// read data from database with id tag from ajax 

// return new data 

print <<<END 
    <script type="text/javascript"> //<![CDATA[ 
     $("#removealert1).click(function() { 
      var checkattrib = $(this).attr("src"); 

      if (checkattrib != "ajax-loader.gif") { 

       $(this).attr("src", "ajax-loader.gif"); 
       delaydyn1 = setTimeout(delaydyn,1000); 

      } else { 

       $(this).attr("src", "req/icons/icon_checknotok.gif"); 
       clearTimeout(delaydyn1); 

      } 
      return false; 
     }); 
     function delaydyn() { 
      $("#alerttable").hide(); 
      $.post("update.php", { mydata: "1001010" }); 
      return false; 
     } 

     }); 
     //]]> 
     </script> 

    <div id='alerttable'> 
       <table><tr><td> 
        Button 5: <input type="image" title="Remove Alert" src="req/icons/icon_checknotok.gif" value="" id="removealert1 /> 
       </td></tr></table> 
    </div> 
    <script type="text/javascript"> //<![CDATA[ 
    $("#removealert2").click(function() { 
     var checkattrib = $(this).attr("src"); 

     if (checkattrib != "ajax-loader.gif") { 

      $(this).attr("src", "ajax-loader.gif"); 
      delaydyn2 = setTimeout(delaydyn2,1000); 

     } else { 

      $(this).attr("src", "req/icons/icon_checknotok.gif"); 
      clearTimeout(delaydyn2); 

     } 
     return false; 
    }); 
    function delaydyn2() { 
     $("#alerttable2").hide(); 
     $.post("update.php", { mydata: "1001010" }); 
     return false; 
    } 

    }); 
    //]]> 
    </script> 

<div id='alerttable'> 
      <table><tr><td> 
       Button 6: <input type="image" title="Remove Alert" src="req/icons/icon_checknotok.gif" value="" id="removealert2" /> 
      </td></tr></table> 
</div> 
END;

来源

2011-02-16 Jared

说实话......这段代码对于一个不在你的思维过程中的局外人是相当密集的。你能把它只配置到必要的部分，并更好地解释你的意图吗？ – clifgriffin 2011-02-16 20:01:36

我同意克利夫 - 很难提供具体的建议。但是，有很多工具可供您选择正确的元素，包括类名，* this *和父/子函数。所以如果你的div中有一个按钮应该隐藏div，你可以说$（this）.parent（）。hide（）为例。 – Mayo 2011-02-16 20:05:11

hehehe ...我真的试图缩小它。我猜这有点复杂。这就是为什么我想我会发布一切，你可以复制到一个文本文件来测试。 – Jared 2011-02-16 20:07:02

我认为你的更大的问题是，你的代码加载动态地存在一些问题。

如果您将该代码复制粘贴到html文件并在浏览器中进行测试，您将看到一些错误。

例如像：

$("#removealert1)应该$("#removealert1")
id="removealert1 />应该id="removealert1" />
只要你CDATA关闭前（//]]>）你有一对夫妇宽松});应删除

我认为应该让你的动态代码有效。

最后但并非最不重要......回到你的主页，利用document.getElementById("dynamiccode").innerHTML=data;似乎带出你的<script> S，我测试用$("#dynamiccode").html(data)，而不是和它的工作，至少在Firefox ...不知道其他浏览器。

希望这会有所帮助。

来源

2011-02-16 20:29:11

我真的不知道JQuery的，我承认我并没有真正理解整个问题，但会尝试说些可能有所帮助的东西...

如果您不想使用特殊的ID每个div的，你可以尝试使用某种封闭的传递这个信息：

function make_hider(dom_node){ 
    function hider(){ 
     dom_node.hide() //Do anything you want with `dom_node` 
    } 
    return hider; 
}

所以，你可以这样做

for each button: 
    this_buttons_div = button.parentNode; 
    button.onclick = make_hider(this_buttons_div);

来源

2011-02-16 20:09:55 hugomg

我认为你将不得不使用jquery的实时功能wireup点击处理程序动态添加元素。尝试改变在代码中使用“＃remove1”为下面单击处理程序：

$("input[id^=remove]")live("click", function() { 
    var checkattrib = $(this).attr("src"); 
    if (checkattrib != "req/icons/icon_waitani.gif") { 
     $(this).attr("src", "req/icons/icon_waitani.gif"); 
     mytimer1 = setTimeout(delayme1, 1000); 
    } else { 
     $(this).attr("src", "req/icons/icon_checknotok.gif"); 
     clearTimeout(mytimer1); 
    } 
    return false; 
});

来源

2011-02-16 20:15:36 Chandu

如何动态地隐藏动态创建的div标签？

回答

相关问题