Jquery가 div를 제거하지 못합니다

일부 동적 동작을 추가하는 형식이 있습니다. 나는 신청자가 신청 한 위치의 행을 가지고있는 테이블을 가지고 있습니다. 제공 버튼이 있으며 제공 버튼을 클릭하면 제출 및 업데이트 할 제안 필드를 삽입하려고합니다. 삽입 할 feilds 얻을 수 있지만 트랜잭션 취소 단추를 클릭하면 폼을 빌드 할 div addapptrans 비우기 가져올 수 없습니다. 아래는 코드입니다. 나는 그것이 내가 놓치고있는 간단한 무엇인가 일 것임에 틀림 없다라는 것을 알고있다. 여기Jquery가 div를 제거하지 못합니다

<head> 
<script type="text/javascript"> 

    $(function(){ 
     $(".offerposition").click(function(){ 
      var row = $(this).closest('tr').find('td:nth-child(1)').text(); 

      alert('You clicked on ' +row); 
      $("#addapptrans").empty(); 
      $("#addapptrans").append(
       $("<input>").attr('type','hidden').attr('value',row).attr('Name','Mchposid')) 
      .append(
       $("<input>").attr('type','submit').attr('value','Complete Offer').attr('id','completeoffertrx').attr('name','completeoffertrx').addClass("buttonlarge buttonmargin") 
      ).append(
       $("<input>").attr('type','button').attr('value','Cancel Transaction').attr('id','canceloffertrx').attr('name','canceloffertrx').addClass("buttonlarge buttonmargin") 
      ); 

     } 
     ) 
    } 
    ); 

    $(function(){ 
     $("#canceloffertrx").click(function(){ 
     $("#addapptrans").empty(); 

     }) 
    }) 
</script> 
</head> 
<body> 

<form > 

    <div id="addapptrans"></div> 
    <p class="posttitle">Positions applied For</p> 
    <table class="tabpositions"> 

     <tbody> 
     <tr> 
      <th class="position">Position</th> 
      <th class="department">Department</th> 
      <th class="dateapp">Date Applied</th> 
      <th class="appdate">Offer?</th> 
     </tr> 

     <tr> 
      <td style="display: none;">2281</td> 
      <td>Building Service Worker - Part time</td> 
      <td>Environmental Services</td> 
      <td>08/13/2001</td> 
      <td><input type="button" class="offerposition" value="Offer Position"></td> 
     </tr>     
     </tbody> 
    </table> 

</form>

출처

2014-10-28 user1554967

피들링을 제공 할 수 있습니까? – GSaunders

이 코드 : #canceloffertrx 전에

$(function(){ 
    $("#canceloffertrx").click(function(){ 
     $("#addapptrans").empty(); 
    }) 
})

실행합니다 페이지에 존재합니다. 따라서 $("#canceloffertrx").click(fn) 페이지에서 0 요소와 일치하고 클릭 핸들러를 모두 0으로 바인딩합니다.

클릭 핸들러를 문서 나 가장 가까운 상위 문서에 바인딩하여이 문제를 해결할 수 있습니다.

는

$('#addapptrans').on('click', '#canceloffertrx', function(){

이 요소 #addapptrans이 선택 #canceloffertrx 실제로 클릭 된 하나와 일치하는 클릭 이벤트 및 요소를 수신 할 때, 이벤트 핸들러 함수를 발사 말한다.

또는 단추를 만들 때 클릭 처리기를 바인딩하십시오.

$("<input>") 
    .attr('type','submit') 
    .attr('value','Complete Offer') 
    .attr('id','completeoffertrx') 
    .attr('name','completeoffertrx') 
    .addClass("buttonlarge buttonmargin") 
    .click(function() { ... });

마지막으로, 어떤 스타일의 조언 : jQuery를 방법을 체인 때 특히, 당신은 훨씬 더 쉽게 읽을 그것의 각 행에 전화를 넣을 수 있습니다.

그리고 attr()은 개체를 인수로 받아 들일 수 있으므로 많은 특성을 설정하기 위해 한 번만 호출 할 수 있습니다.

$("<input>") 
    .attr({ 
    type: 'submit', 
    value: 'Complete Offer', 
    id: 'completeoffertrx', 
    name: 'completeoffertrx' 
    }) 
    .addClass("buttonlarge buttonmargin") 
    .click(function() { ... });

출처

2014-10-28 17:40:45

위임 된 이벤트 핸들러는 변경되지 않는 가장 가까운 조상 요소 (예 :이 질문에서'# addapptrans')에 첨부하는 것이 가장 좋습니다. 더 가까이 있지 않으면'document'가 대체입니다. –

솔루션 작동 http://jsfiddle.net/jn7jh3bm/ – jbyrne2007

주목할만한 내용과 수정 된 내용! :) –

Jquery가 div를 제거하지 못합니다

답변

관련 문제