如何正确构造代码,仍然可以使用$(this)var?

时间:2020-08-11 08:34:38

标签: jquery ajax

多次使用上传脚本时,每次发布多个脚本时都会出现问题。

我发现我不是因为发生了嵌套事件,现在,如果我不这样做,就无法使用从首次点击事件中设置的VAR。

我该如何以不重复事件的形式构造代码,而仍然可以使用我的VAR?

JS:

    $(document).ready(function(){

  $('.editRow').on("click", function(){

    $("#editDoc").slideToggle(500);
    var popup = $("#editDoc");
    var editparent = $(this).closest(".avdExpand");
    var row = $(this).closest(".admDoc");
    var rowID = $(row).attr("data-row");
    var link = $(row).attr("data-link");
    var rev = $(row).attr("data-rev");
    var revNext = parseInt(rev) + 1;
    var editLink = $(row).attr("data-edit-link");
    var dokTypDiv = $(row).find(".dokTyp");
    var dokTyp = $(dokTypDiv).text();
    var dokNamnDiv = $(row).find(".dokNamn");
    var dokNamn = $(dokNamnDiv).text();
    var dokNrDiv = $(row).find(".dok_nr");
    var dokNr = $(dokNrDiv).text();
    

    console.log(dokTyp);
    console.log(popup);

    var fileNote = $(popup).find(".note:first");
    var newFileNote = ""+dokNr+" "+dokTyp+" "+dokNamn+"";
    $(fileNote).html(newFileNote);
    $(popup).find("a").attr("href", editLink);
    $(popup).find(".center").html("<div>Rev "+rev+" </div><div><i class='fas fa-long-arrow-alt-right'></i></div><div> Rev "+revNext+"</div>");

    var AppendButton = $(popup).find(".editFormButton");
    var appendForm = $(popup).find("#editForm");
    var inputFilNamn = '<div class="inputRow"><input class="appendInput" type="text" name="namn" value="'+dokNamn+'"></div>';
    var inputDok1 = '<div class="boxes"><div class="box"><input type="file" name="file-1" id="file-1" class="inputfile inputfile-1 addRollWord" data-multiple-caption="{count} files selected" multiple /><label for="file-1"><i class="far fa-file-word" width="100%" height="17" viewBox="0 0 20 17"></i> <span>Välj fil</span></label></div></div>';
    var inputDok2 = '<div class="boxes"><div class="box"><input type="file" name="file-2" id="file-2" class="inputfile inputfile-2 addRollPDF" data-multiple-caption="{count} files selected" multiple /><label for="file-2"><i class="far fa-file-pdf" width="100%" height="17" viewBox="0 0 20 17"></i> <span>Välj fil&hellip;</span></label></div></div>';
    console.log(appendForm);
    $(appendForm).append(inputFilNamn);

    var oneFile = ["Mall", "Checklista", "Övrigt"];
    
    if( $.inArray(dokTyp, oneFile) != -1){
      $(appendForm).append(inputDok1);
    } else {
      $(appendForm).append(inputDok1);
      $(appendForm).append(inputDok2);
    }

    $(appendForm).append('<input class="appendInput" type="hidden" name="id" value="'+rowID+'">');


    ;( function( $, window, document, undefined ) {
    $( '.inputfile' ).each( function()  {

          var $input = $(this),
            $label = $input.next( 'label' ),
            labelVal = $label.html();


        $input.on('change', function(e) {
            var fileName = '';
            
            if( this.files && this.files.length > 1 )
                fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
            else if( e.target.value )
                fileName = e.target.value.split( '\\' ).pop();

            if( fileName )
            
                $label.find( 'span' ).html( fileName );
            else
                $label.html( labelVal );
        });
        // Firefox bug fix
        $input
        .on( 'focus', function(){ $input.addClass( 'has-focus' ); })
        .on( 'blur', function(){ $input.removeClass( 'has-focus' ); });
    });
})( jQuery, window, document );

  
    $('.editForm').submit(function(e) {
    e.preventDefault();

    var knapp = $(this);
    var parent = $(this).closest(".admExpandAdd");
    var appenddiv = $(this).closest(".avdExpandContainer").children(".avdExpand.R");
    var dokTyp = $(parent).find(".addRollTyp").val();
    var process = $(parent).find(".addRollProcess").val();
    var avd = $(parent).find(".addRollAvd").val();
    var namn = $(parent).find(".addRollNamn").val();
   

      $.ajax({
        url: "scripts/s_editDoc.php", // Change this to your PHP update script!
        type: 'POST',
        processData: false, // important
        contentType: false, // important
        data: new FormData(this),
        dataType: 'json',
        success: function(ret){
          $('input[type="radio"]').prop('checked', false);
          var id = ret.id;
          var dokTyp = ret.dokTyp;
          var dokNamn = ret.dokNamn;
          var link = ret.link;
          var editLink = ret.editLink;
          var rev = ret.rev;
          var dokNr = ret.dokNr;
          
          $('#editForm')[0].reset();
          $(".appendInput").remove();
          $(".boxes").remove();
          $(".popupdiv").hide();
          console.log(row);
          $(row).replaceWith('<div class="admDoc" data-rev="'+$.trim(rev)+'" data-row="'+$.trim(id)+'" data-link="'+$.trim(link)+'" data-edit-link="'+$.trim(editLink)+'"><div class="note dokTyp">'+$.trim(dokTyp)+'</div><a  target="blank" href="'+$.trim(link)+'"><div class="dokNamn">'+$.trim(dokNamn)+'</div></a><div class="note dok_nr">'+$.trim(dokNr)+'</div><div class="note rev">Rev '+$.trim(rev)+'</div><div class="icons"><div><i class="fas fa-link tooltip"><span class="tooltiptext">'+$.trim(link)+'</span></i></div><div class="editRow"><i class="far fa-edit"></i></div><div class="deleteRow"><i class="far fa-trash-alt"></i></div></div></div>')
        },
        error: function(ret){
            console.log(ret.response);
        }    
      });
    });
  });
});

HTML Popupform:

<div class="popupdiv hidden" id="editDoc">

    <div class="popupHeader">
        <h1>Uppdatera dokument</h1>
        <div class="absolute-topright closeDocForm"><button class="closeWindow"><i class="far fa-window-close"></i></button></div>
    </div>

    <div class="container">

        <div class="blockheader"><div class="blockHeaderIcon"><i class="fas fa-circle"></i><h3 class="blockHeaderNumber">1</h3></div><h3 class="blockHeaderText">Redigera filen</h3> <p class="note"> AM20:009 Filnamn Mall</p></div>
        <div class="block">
            <div class="blockrow geteditfile"><div>Ladda ned filen för redigering</div><a href=""><div class="getEditFile"><i class="fas fa-arrow-alt-circle-down"></i> Hämta fil</div></a></div>
            <div class="blockrow">Revisionsnummer kommer att uppdateras:</div>
            <div class="blockrow center"></div>
        </div>

        <div class="blockheader"><div class="blockHeaderIcon"><i class="fas fa-circle"></i><h3 class="blockHeaderNumber">2</h3></div><h3 class="blockHeaderText">Save File</h3></div>
        <div class="block">
          <form class="editForm" id="editForm">
            
          </form>
        </div>

        <div class="blockheader"><div class="blockHeaderIcon"><i class="fas fa-circle"></i><h3 class="blockHeaderNumber">3</h3></div><h3 class="blockHeaderText">Approval</h3> <p class="note">Bla bla bla</p></div>
        <div class="block">
            <div class="blockrow"><div>bla bla bla.</div></div>

HTML数据行:

        <div class="admDoc" data-rev="2" data-row="232" data-link="VS/Kvalitet/Instruktion/AM20_001_Riskanalys.pdf" data-edit-link="VS/Kvalitet/Instruktion/AM20_001_Riskanalys.doc">
    <div class="note dokTyp">Instruktion</div>
    <a target="blank" href="VS/Kvalitet/Instruktion/AM20_001_Riskanalys.pdf">
    <div class="dokNamn">Riskanalys</div></a>
    <div class="note dok_nr">AM20:001</div>
    <div class="note rev">Rev 2</div>
    <div class="icons">
<div><i class="fas fa-link tooltip"><span class="tooltiptext">VS/Kvalitet/Instruktion/AM20_001_Riskanalys.pdf</span></i></div>
    <div class="editRow"><i class="far fa-edit"></i></div>
    <div class="deleteRow"><i class="far fa-trash-alt"></i></div>
    </div>
</div>

0 个答案:

没有答案
相关问题