jquery ajax가 모든 div에 동일한 결과를 제공합니다.

Question

파일의 이름을 바꿀 수 있습니다.

파일을 하나 개의 이름이 '안녕하세요'는 두 개의 파일 이름입니다 '안녕', 파일 셋 이름

'헤이'이고 내가 파일의 이름을 변경 : 순간의 작동하지만, 예를 들어 내가 가지고 말할 수에서 하나는 '무언가'로 이름을 바꿀 것입니다.하지만 파일 2의 이름을 'youarecool'로 바꾸면 파일 이름이 한 두 개로 바뀝니다.

여기 내 자바 스크립트입니다. 무엇이 잘못 되었나요? 여기 내 jsfiddle입니다. 여기

http://jsfiddle.net/RSvre/는 파일

<div class="each_file"> 
     <span class="file_icon"><img src="img/file-icon/avi.png" /></span> 
     <div class="file_details"> 
      <div class="file_title"><a class="fnl" href="#">filename</a></div> 
       <div class="file_detail_stat">filesize | downloads Downloads | 
       Uploaded on date</div> 
       </div> 
      <ul class="file_manage_icons"> 
       <li><a href="#"> 
       <span title="Email" class="mail" id="$auth"></span> 
       </a></li> 
       <li><a href="#"><span title="Edit" class="edit" id="$auth"></span></a></li> 
       <li><a href="#"><span title="Lock" class="lock" id="$auth"></span></a></li> 
       <li><a href="#"><span title="Delete" class="bin" id="$auth"> 
       </span></a> </li> 
      </ul> 
      <div class="clear"></div> 
     </div> 

각각에 대한 HTML이며, 이것은 당신이 당신이 가진 것, 그래서 바인딩 내면의 클릭을 포장해야하는 자바 스크립트

$('.edit').click(function(e){ 

    e.preventDefault(); 
    var auth = $(this).attr('id'); 
    var each = $(this).closest('.each_file').find('.fnl'); 

    $.post("ajax/edit_filename.php", { auth:auth }) 
     .done(function(data) { 

     $("#dialog").dialog({ 
      modal: true, 
      resizable: false, 
      title: 'Edit file name', 
      buttons: { 
       "Close": function() { 
        $(this).dialog("destroy"); 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $('.ui-dialog-content').html('<input type="text" class="newfname" value="'+data+'"/><div class="btn_l"><input type="submit" class="submit_btn" id="edit_filenameb" value="Edit Name" /></div>'); 
    }); 

    $(document).on('click', '#edit_filenameb', function(e){ 
     e.preventDefault(); 
     var nname = $('.newfname').val(); 
     console.log(nname); 

     if(nname == ''){ 
      $('.submit_btn').effect('shake'); 
     } else { 
      $.post('ajax/change_filename.php', {nname:nname, auth:auth}) 
      .done(function(data){ 
       each.text(data); 
       $('#dialog').dialog('close'); 
      }); 
     } 
    }); 
}); 

Answer 1

나는 파일 이름을 바꿀 때마다 document에 새 클릭 청취자를 추가하지만 결코 정리할 필요가 없다고 생각합니다. 다음 이름을 바꿀 때 실제로 두 이름 바꾸기 함수가 모두 호출됩니다. 이름을 바꿀 파일의 이름을 변수에 저장 한 다음 페이지에 설정된 단일 클릭 수신기에서 파일의 이름을 바꿀 수 있습니다. 또한 모든 페이지를 클릭 할 때마다 이름이 변경되지 않도록 이름 변경이 이미 발생했는지 여부를 알 수있는 방법이 필요합니다.

Answer 2

입니다 :

$('.edit').click(function(e){ 
    e.preventDefault(); 
    var auth = $(this).attr('id'); 
    var each = $(this).closest('.each_file').find('.fnl'); 

    $.post("ajax/edit_filename.php", { auth:auth }) 
     .done(function(data) { 

     $("#dialog").dialog({ 
      modal: true, 
      resizable: false, 
      title: 'Edit file name', 
      buttons: { 
       "Close": function() { 
        $(this).dialog("destroy"); 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $('.ui-dialog-content').html('<input type="text" class="newfname" value="'+data+'"/><div class="btn_l"><input type="submit" class="submit_btn" id="edit_filenameb" value="Edit Name" /></div>'); 
    }); 

    //Code from here took to outside 
}); 

//This was taken out from the other click binding 
$(document).on('click', '#edit_filenameb', function(e){ 
    e.preventDefault(); 
    var nname = $('.newfname').val(); 
    var auth = ... //Get the auth here 
    console.log(nname); 

    if(nname == ''){ 
     $('.submit_btn').effect('shake'); 
    } else { 
     $.post('ajax/change_filename.php', {nname:nname, auth:auth}) 
     .done(function(data){ 
      each.text(data); 
      $('#dialog').dialog('close'); 
     }); 
    } 
}); 

희망이 있습니다. 건배