如何動態地隱藏動態創建的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標籤？

回答

相關問題