Irgendein Grund, warum ich nicht html Textbereich Wert mit jQuery für modals greifen kann, wenn Sie Lenker verwenden?

Question

// Allow the user to post a note into the db as well as display it in the modal along with all the other notes 
 
$(document).on("click", ".add-note", function() { 
 
    debugger; 
 
    var thisId = $(this).attr("data-id"); 
 
    console.log($(".note-text").val()); 
 

 
    $.ajax({ 
 
    method: "POST", 
 
    url: "/savednotes/" + thisId, 
 
    data: { 
 
     body: $(".note-text").val() 
 
    } 
 
    }).then(function() { 
 

 
    $(".note-text").val(""); 
 

 
    $.ajax({ 
 
    method: "GET", 
 
    url: "/savednotes/" + thisId 
 
    }) 
 
    .done(function(data) { 
 
    console.log(data.notes); 
 
    $(".all-notes").empty(); 
 
    for (var i = 0; i < data.notes.length; i++) { 
 
     var noteDiv = $("<div>").addClass("added-notes"); 
 
     var noteBtn = $("<button>").addClass("btn delete-note-btn"); 
 
     noteBtn.text("X"); 
 
     noteBtn.attr("data-id", data.notes[i]._id); 
 
     $(noteDiv).append(data.notes[i].body); 
 
     $(noteDiv).append(noteBtn); 
 
     $(".all-notes").append(noteDiv); 
 
    } 
 
    }); 
 
}); 
 
});

<div class="row"> 
 
    <div class="col-md-12 text-center"> 
 

 
    <h3>Saved Articles</h3> 
 

 
    <div id="articles"> 
 
    {{#each savedArticles}} 
 
     <div data-id="{{_id}}" class="article"> 
 
     <img class="article-img" src="{{image}}"> 
 
     <a href="{{url}}" target="_blank"><h2> {{headline}} </h2></a> 
 
     <p class="byline"> {{byline}} </p> 
 
     <p class="summary"> {{summary}} </p> 
 
     <button data-id="{{_id}}" class="note btn" data-toggle="modal" data-target="#noteModal-{{_id}}">Add Note</button> 
 
     <a href="/removearticle/{{_id}}"><button data-id="{{_id}}" id="delete" class="btn">Delete from Saved</button></a> 
 
     </div> 
 

 
     <!-- Modal --> 
 
     <div class="modal fade" id="noteModal-{{this._id}}" role="dialog"> 
 
     <div class="modal-dialog"> 
 
        
 
     <!-- Modal content--> 
 
      <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close close-modal" data-dismiss="modal">&times;</button> 
 
       <h2 class="modal-title">Notes for:</h2> 
 
       <h4 class="modal-title"><i>{{this.headline}}</i></h4> 
 
       <h5>{{this.byline}}</h5> 
 
      </div> 
 
      <div class="modal-body"> 
 

 
       <form id="form-"{{_id}} class="form-group"> 
 
       <div class="all-notes"></div> 
 
       <label for="note">Note:</label> 
 
       <textarea class="note-text form-group form-control" name="userNote" rows="4"></textarea> 
 
       </form> 
 

 
      </div> 
 
      <div class="modal-footer"> 
 
       <button data-id="{{this._id}}" type="button" class="btn add-note">Add Note</button> 
 
      </div> 
 
      </div> 
 
        
 
     </div> 
 
     </div> 
 

 

 
    {{/each}} 
 
    </div> 
 

 
    </div> 
 
</div>

Ich bin in der Lage den Textbereich Wert mit jQuery zum ersten gespeicherten Artikel zu packen, aber ich kann es nicht für einen zweiten oder dritten gespeicherten Artikel greifen. Es greift nach einer leeren Schnur. Ich benutze ein Modal, um das Formular selbst anzufügen, um eine Notiz zu schreiben, und das Modal funktioniert einwandfrei für den ersten Artikel, aber wenn Text für Artikel geschnappt wird, die nichts folgen, wird gegriffen.

Answer 1

Nun, wenn ich Ihre Frage richtig in meinem Kommentar erraten, hier ist die Lösung für Sie:

// OUTPUT 1 
 
$(".note-summary1").val($(".note-text").val()) 
 
    
 
// OUTPUT 2 
 
var value = ""; 
 
$.each($(".note-text"), function(idx, textArea) { 
 
    \t value += $(textArea).val(); 
 
}); 
 
    $(".note-summary2").val(value)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
INPUT: 
 
<textarea class="note-text">Text 1</textarea> 
 
<textarea class="note-text">Text 2</textarea> 
 
<textarea class="note-text">Text 3</textarea> 
 

 
<br/> 
 
<br/> 
 

 
OUTPUT 1: 
 
<textarea class="note-summary1"></textarea> 
 
<br/> 
 
OUTPUT 2: 
 
<textarea class="note-summary2"></textarea>

Die Sache ist, dass $(".note-text") gibt einen Array von Textbereichen nicht einen gerade, so Sie müssen sie durchlaufen und ihren Wert erhalten. Sonst gibt val() nur den ersten Wert zurück. Siehe den Unterschied zwischen OUTPUT 1 und OUTPUT 2