Jquery UI, 대화 상자가 작동하지 않습니다.

Question

Jquery UI를 테스트하고 그것을 즐기지 않습니다.

이 http://jsfiddle.net/FhjQy/4/은 복사, 붙여 넣기 및 (개인 정보 삭제)입니다.

거부 ​​이미지를 클릭하면 페이지가 깜박입니다. 그것은 내 모달 폼 대화 상자를 가져올 것입니다!

HTML :

<div id="comments_dialog" title="Reject an event"> 
     <form name="commentsForm" action="#" method="POST"> 
      <p>The Event: <span id="eventName"></span> is being rejected, you have the 
       option to give a reason or any comments in the box below.</p> 
      <p class="ui-icon ui-icon-alert" 
      id="errorComment"></p> 
      <textarea name="comments" id="comments" size="30"></textarea> 
      <p>The Event: <span id="eventName"></span> will be removed from the system 
       and will not go on to the calendar, any comments wiil be emailed to the 
       event author. 
       <br/>Click the button below.</p> 
     </form> 
    </div> 
<TABLE WIDTH="100%" BORDER="1" CELLSPACING="0" CELLPADDING="4" DWCOPYTYPE="CopyTableRow" 
BORDERCOLOR="#000066"> 
    <tr class="tableHeading"> 
     <td>Actions</td> 
     <td>Event Name</td> 
     <td>Event Description</td> 
     <td>Date & Time</td> 
    </tr> 
    <tr class="tableRow<?=$num?>" class="1234"> 
     <td> 
      <form name="actionTaken" class="1234" action="#" method="POST"> 
       <input type="hidden" name="submit_id" id="submit_id" value="1234" /> 
       <input name="approve" id="approve" value="Y" type="image" src="/control/images/tick-green.gif" 
       />Approve 
       <br/> 
       <input name="edit" id="edit" value="Y" type="image" src="/control/images/edit.gif" 
       />Edit & Approve 
       <br/> 
       <input name="reject" id="reject" value="Y" type="image" src="/control/images/cross-small.gif" 
       />Reject & Comment</form> 
     </td> 
     <td class="event_name">Event Name</td> 
     <td>Event Description</td> 
     <td>Date Time</td> 
    </tr> 
</TABLE> 

JS :

$("#comments_dialog").dialog({ 
    autoOpen: false, 
    resizable: true, 
    modal: true, 
    buttons: { 
     "Confirm Event Rejection": function() { 
      var comments = $("#comments").val(); 


      if ((comments !== "") || (comments !== undefined)) { 

       var dataString = 'submit_id=' + submit_id + '&reject=' + reject + '&comments=' + comments; 

       $.ajax({ 
        type: "POST", 
        url: "/echo/html/", 
        data: dataString, 
        success: function (response) { 
         if (response == "rejectSuccess") { 
          $(this).dialog("close"); 
          $("tr#" + submit_id).fadeOut(3000); 

          $("#blue").after("<div id=\"green\">The event has been rejected and deleted from the system. Your comments have been sent to the person that submitted the event.</div>"); 
          window.setTimeout(hideNotify, 60000); 
          $("tr#" + submit_id).remove(); 
         } else { 
          $("#errorComment").text("There was an error, please refresh the page and try again."); 
         } 
        }, 
        error: function() { 
         $("#errorComment").text("There was an error, please refresh the page and try again."); 
        } 
       }); 
       return false; 
      } else { 
       $('#errorComment').text("You need to give a feedback for this rejection!"); 
      } 

     } 
    }, 
    closeOnEscape: false 
}); 

$("input#reject").click(function() { 
     submit_id = $(this).parent().attr("class"); 
     reject = $(this).val(); 
     var event_name = $(this).parent().parent().find(".event_name").html(); 

     $("#eventName").text(event_name); 

     $("#comments_dialog").dialog("open"); 
    }); 

감사

Answer 1

IT는 input#reject 루프 (행 하나)에있는 것으로 보인다. id 대신 클래스 사용 : id는 DOM의 고유 요소를 식별합니다. 그런 다음 시도해보십시오 $('input.reject).click...