2011-02-16 3 views
0

죄송합니다. jquery를 사용하여 아직 새로운 질문이므로 쉬운 질문 일 수 있습니다. 내가 div 태그를 숨길 버튼과 함께 테이블에 div 태그를 설정하려고합니다. 각 div 태그에 id 태그를 사용하여 작동시키는 방법을 알았지 만 무제한 버튼 (100 개 이상)을 처리 할 수있는 클래스와 같은 것이 필요합니다. 여기 내가 시도한 것이있다. 나는 자바 스크립트 코드를 동적 반환 코드에 넣었다. 버튼 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; 
+5

솔직히 말해서 ...이 코드는 당신의 사고 과정에없는 외부인에게 꽤 밀집되어 있습니다. 중요한 부분 만 짝을 지어 더 나은 의도를 설명 할 수 있습니까? – clifgriffin

+0

clif에 동의합니다. 구체적인 제안을하기가 어렵습니다.그러나 클래스 이름, * this * 및 부모/자식 함수를 포함하여 올바른 요소를 선택하는 데 사용할 수있는 도구가 많이 있습니다. 따라서 div에 div가 숨겨져 있어야하는 버튼이 있다면 $ (this) .parent(). hide()를 예로들 수 있습니다. – Mayo

+0

hehehe ... 나는 그것을 좁히려 고 시도했다. 나는 그것이 다소 복잡하다고 생각한다. 그것이 내가 모든 것을 게시 할 것이라고 생각한 이유이며 테스트를 위해 텍스트 파일로 복사 할 수 있습니다. – Jared

답변

0

나는 당신의 더 큰 문제는 코드가 동적으로로드 된 몇 가지 문제가 있다고 생각합니다.

해당 코드를 html 파일에 복사하여 붙여넣고 브라우저에서 테스트하면 몇 가지 오류가 표시됩니다. 예를 들어처럼

:

  • $("#removealert1)는 삭제해야 }); 느슨한 몇 가지있다 $("#removealert1")
  • id="removealert1 />은 그냥 CDATA 폐쇄 이전 id="removealert1" />
  • (//]]>을)해야해야

동적 코드가 작동해야한다고 생각합니다.

마지막으로 중요한 것은 ... document.getElementById("dynamiccode").innerHTML=data;을 사용하여 <script>을 제거한 것 같습니다. $("#dynamiccode").html(data)을 사용하여 테스트했는데, 적어도 Firefox에서는 작동했습니다 ... 다른 것에 대해 모르겠다. 브라우저.

희망이 도움이됩니다.

+0

죄송합니다 자바 스크립트 오류가 신경 쓰지 마십시오. 이 사이트에 게시하는 것은 사용자 오류 일뿐입니다. 그러나, 당신은 $ ("# dynamiccode")를 사용하고 있습니다 .html (data)는 작동합니다. 흠 ... 음, 각 테이블을 수동으로 설정하거나 사이버 네이트의 아이디어로 파악하려고합니다. 오 잘. .. 고마워. – Jared

+0

좋아, 완벽하지는 않지만 Firefox와 IE에서는 100 % 모든 버튼이 작동합니다. 감사! – Jared

0

정말 JQuery와 몰라, 내가 정말 모든 질문을 이해하지 않은 고백, 그러나 도움이 될만한 것을 말하려고 노력할 것입니다 ...

다음에 대해 특별 ID를 사용하지 않으려는 경우 나는 당신이 JQuery와의 라이브 기능을 사용해야 할 것입니다 생각

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); 
0

처럼 뭔가를 할 수 있습니다 : 당신이 폐쇄 어떤 종류를 사용하려고 할 수 있습니다 div의 각이 정보를 전달하는 wireup click 동적으로 추가 된 요소에 대한 핸들러. 아래에 "#의 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; 
}); 
+0

ok 나는 이것이 내가 갈 필요가있는 곳이라고 생각한다. 나는 이것에 잠시 동안 머리를 때렸다. – Jared

관련 문제