Question

我正在尝试重命名文件。在它工作的时刻，但是，比方说我有：

文件名为'hello'，文件名为'bye'，文件三名为'hey'

我将文件1重命名为'something'它将重命名它，但是如果我然后将文件二重命名为'youarecool'它将重命名文件一和二。

这是我的javascript，我做错了什么。这是我的jsfiddle。 http://jsfiddle.net/RSvre/

这是每个文件的html

 <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>

这是javascript

$('.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');
        });
    }
});

希望这会有所帮助。干杯

jquery ajax给所有div都给出了相同的结果

2 个答案: