Question

我有附加div列出一些值，我需要使用模态编辑它们，我已经可以编辑了，但列表中附加的内容根本没有变化。

我的JS：

 var creatingModal = false;

  canvas.on('mouse:up', function (){
      creatingModal = true;
      jQuery('#modal').modal('show').trigger('shown');
      //get values from obs form
      jQuery(document).on("click", "#submitObservacao", function(e){
        e.preventDefault();

        var denteNumero   = jQuery("#dente").val();
        var procedimentos = jQuery("#procedimentos").val();
        var observacao    = jQuery("#observacoes").val();

        jQuery("#anotacoes").append(
          '<div class="thumbnail mark" id="itemObs" data-toggle="modal" data-target="#EditMod"><b>Dente</b>:<span id="anotacaoDente" class="anotDent">'+ denteNumero +'</span> <i class="fa fa-trash f-right" id="removerNow" aria-hidden="true"></i> <br> <b>Procedimentos:</b> <span id="anotacaoProcedimentos">'+ procedimentos +'</span><br> <b>Observações:</b> <span id="anotacaoObservacao">'+ observacao +'</span><br> </div>'
        );

        //refreshing values
        jQuery(denteNumero).val('');
        jQuery("#dente").val('');
        jQuery(procedimentos).val('');
        jQuery(observacao).val('');
        jQuery("#observacoes").val('');
        jQuery('#modal').modal('hide').unique();
      });

      jQuery(document).on("click", "#removerNow", function(e){
        e.preventDefault();

        jQuery(this).parent().remove();

        var canvas_objects = canvas._objects;
        console.log(canvas_objects);
          if(canvas_objects.length !== 0){
            var last = canvas_objects[canvas_objects.length -1]; //Get last object
            canvas.remove(last);
            canvase.renderAll();
           }
      });
  });

  jQuery(document).on("click", ".mark", function(e){
    e.preventDefault();
           var numDente = jQuery(this).find("#anotacaoDente").html();
           var numObservacoes = jQuery(this).find("#anotacaoObservacao").html();
           var numProcedimentos = jQuery(this).find("#anotacaoProcedimentos").html();


          jQuery("#obsModalEdit input[name=dente]").val(numDente);
          jQuery("#obsModalEdit select[name=procedimentos]").val(numProcedimentos);
          jQuery("#obsModalEdit textarea[name=observacoes]").val(numObservacoes);



          //Edit on click
          jQuery(document).on("click", "#submitEditar", function(e){
            e.preventDefault();

            var numDente   = jQuery("#denteEdit").val();
            var numProcedimentos = jQuery("#procedimentosEdit").val();
            var numObservacoes     = jQuery("#observacoesEdit").val();

        //Edit the append contente here

            jQuery('#EditMod').modal('hide');
          });
  });

})();

我要编辑内容的HTML是由上面JS中的追加生成的，谢谢。

HTML

    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 ">
      <canvas id="c"  width="840" height="590" style="border:1px solid #aaa"></canvas>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-3 col-xs-12 ">
      <div style="display: inline-block; margin-left: 10px">
        <button style="visibility: hidden;" id="drawing-mode" class="btn btn-info">Cancel drawing mode</button><br>
        <button style="visibility: hidden;" id="clear-canvas" class="btn btn-info">Clear</button><br>

          <div id="drawing-mode-options">
           <label style="visibility: hidden;" for="drawing-mode-selector">Mode:</label>
           <select style="visibility: hidden;" id="drawing-mode-selector">
             <option>Pencil</option>
             <option>Circle</option>
             <option>Spray</option>
             <option>Pattern</option>

             <option>hline</option>
             <option>vline</option>
             <option>square</option>
             <option>diamond</option>
             <option>texture</option>
           </select><br>

            <div class="thumbnail od-thumb">
              <label for="drawing-line-width">Expessura da Linha:</label>
              <span class="info">2</span><input type="range" value="2" min="0" max="150" id="drawing-line-width"><br>

              <label for="drawing-color">Cor da Linha:</label>
              <input type="color" value="#005E7A" id="drawing-color"><br>
           </div>
             <label style="visibility: hidden;" for="drawing-shadow-color">Shadow color:</label>
             <input style="visibility: hidden;" type="color" value="#005E7A" id="drawing-shadow-color">

             <label style="visibility: hidden;" for="drawing-shadow-width">Shadow width:</label>
             <span style="visibility: hidden;" class="info">0</span><input style="visibility: hidden;" type="range" value="0" min="0" max="50" id="drawing-shadow-width">

             <label style="visibility: hidden;" for="drawing-shadow-offset">Shadow offset:</label>
             <span style="visibility: hidden;" class="info">0</span><input style="visibility: hidden;" type="range" value="0" min="0" max="50" id="drawing-shadow-offset">
         </div>
      </div>
    <!-- close col-panel first-->
    </div>
    <!-- fecha row -->
   </div>
   <!-- jumbotron -->
   <div class="row">
     <div class="">

     </div>
     <div class="col-lg-12">
       <div class="tron" id="anotacoes">

       </div>
     </div>
   </div>
   <!-- Modal -->
   <div id="modal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" >
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-backdrop="static" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title">Adicionar Região</h4>
         </div>
         <div class="modal-body">

           <form class="form-horizontal" id="obsModal">
           <!-- Text input-->
           <div class="form-group">
             <label class="col-md-4 control-label" for="textinput">Dente:</label>
             <div class="col-md-4">
             <input id="dente" name="textinput" type="text" placeholder="Número do dente" class="form-control input-md" required="">
             </div>
           </div>

           <!-- Select Basic -->
           <div class="form-group">
             <label class="col-md-4 control-label" for="selectbasic">Procedimentos:</label>
             <div class="col-md-4">
               <select id="procedimentos" name="selectbasic" class="form-control">
                 <option value="122">122 - Tramua 1</option>
                 <option value="123">123 - Trauma 2</option>
               </select>
             </div>
           </div>

           <!-- Textarea -->
           <div class="form-group">
             <label class="col-md-4 control-label" for="textarea">Observações:</label>
             <div class="col-md-4">
               <textarea class="form-control" id="observacoes" placeholder="Digite sua observação aqui" name="textarea"></textarea>
             </div>
           </div>
           <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
           <button type="button" id="submitObservacao" class="btn btn-primary">Salvar Anotações</button>

           </form>

         </div>
         <div class="modal-footer">
           <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
           <button type="button" class="btn btn-primary">Salvar Anotações</button> -->
         </div>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->

 <!-- EDIT MODAL -->
 <div id="EditMod" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" >
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-backdrop="static" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title">Editar Anotação</h4>
       </div>
       <div class="modal-body">

         <form class="form-horizontal" id="obsModalEdit">
         <!-- Text input-->
         <div class="form-group">
           <label class="col-md-4 control-label" for="textinput">Dente:</label>
           <div class="col-md-4">
           <input id="denteEdit" name="dente" type="text" placeholder="Número do dente" class="form-control input-md" required="">
           </div>
         </div>

         <!-- Select Basic -->
         <div class="form-group">
           <label class="col-md-4 control-label" for="selectbasic">Procedimentos:</label>
           <div class="col-md-4">
             <select id="procedimentosEdit" name="procedimentos" class="form-control">
               <option value="122" name="procedimentos">122 - Tramua 1</option>
               <option value="123" name="procedimentos">123 - Trauma 2</option>
             </select>
           </div>
         </div>

         <!-- Textarea -->
         <div class="form-group">
           <label class="col-md-4 control-label" for="textarea">Observações:</label>
           <div class="col-md-4">
             <textarea class="form-control" id="observacoesEdit" placeholder="Digite sua observação aqui" name="observacoes"></textarea>
           </div>
         </div>
         <button type="button" class="btn btn-default refresh" data-dismiss="modal">Cancelar</button>
         <button type="button" id="submitEditar" class="btn btn-primary">Editar Anotação</button>

         </form>

       </div>
       <div class="modal-footer">
         <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
         <button type="button" class="btn btn-primary">Salvar Anotações</button> -->
       </div>
     </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->

Answer 1

没有HTML代码就有点困难了。无论如何，我复制了JS的最后一部分并添加了几行注释。希望这会有所帮助。

//Edit on click
jQuery(document).on("click", "#submitEditar", function(e){
e.preventDefault();

var numDente   = jQuery("#denteEdit").val();
var numProcedimentos = jQuery("#procedimentosEdit").val();
var numObservacoes     = jQuery("#observacoesEdit").val();

//Edit the append contente here

//Can't you changed the value of the relevant controller like this.
jQuery('#yourElementToModify').val(numProcedimentos);

//Or if you want to change the DIV fully,
jQuery('#itemObs')[0].innerHTML = 'append content';

jQuery('#EditMod').modal('hide');

如何在模态版本之前替换附加内容

1 个答案: