keyup不适用于多个textareas

Im using keyup function and that works fine for first textarea but wont work for others. Below is my html and javascript:

我使用键盘功能，这适用于第一个textarea但不适用于其他人。下面是我的html和javascript：

<div class="form-group col-md-5">
    <label for="Sympton" class="control-label">Observed Symptom</label>
<div class="output1"></div>
</div>
<div class="form-group col-md-5">
    <label for="Why" class="control-label">Why?</label>
<textarea id="myTextarea1" class="form-control" name="Why" cols="20" rows="3"></textarea>
</div>
<div class="form-group col-md-2">
</div>        
<div class="form-group col-md-5">
    <label for="Sympton" class="control-label">Symptom 2</label>
<div class="output2"></div>
</div>
<div class="form-group col-md-5">
    <label for="Why" class="control-label">Why?</label>
<textarea id="myTextarea2" class="form-control" name="Why" cols="20" rows="3"></textarea>
</div>
<div class="form-group col-md-2">
</div> 

$(document).ready(function(){

    $("#myTextarea1").keyup(function(){
        // Getting the current value of textarea
        var currentText = $(this).val();

        // Setting the Div content
        $(".output1").text(currentText);
    });

    $("#myTextarea2").keyup(function(){
        // Getting the current value of textarea
        var currentText = $(this).val();

        // Setting the Div content
        $(".output2").text(currentText);
    });

});

---

Im actually generating the code using php don't see how that would effect it. But yes works fine in fiddle. Could other Javascript conflict?

我实际上使用PHP生成代码不明白这将如何影响它。但是在小提琴中工作正常。其他Javascript可以冲突吗？

    $(document).ready(function(){ 

    <?php 
        if(isset($_SESSION['AnalysisCounter'])){
            for($i=1;$i<=$_SESSION['AnalysisCounter'];$i++){ ?> 
            $("#myTextarea<?php echo $i; ?>").keyup(function(){
                // Getting the current value of textarea
                var currentText = $(this).val();

                // Setting the Div content
                $(".output<?php echo $i; ?>").text(currentText);
            });
      <?php } } ?>
      });

1 个解决方案

#1

I believe that the issue might be because of dynamically adding the second and henceforth textboxes. So it is wise to delegate the events for this scenario to make it work:

我认为问题可能是因为动态添加第二个和后来的文本框。因此，委托此方案的事件使其工作是明智的：

$(document).ready(function() {

  $(document).on("keyup", "#myTextarea1", function() {
    // Getting the current value of textarea
    var currentText = $(this).val();

    // Setting the Div content
    $(".output1").text(currentText);
  });

  $(document).on("keyup", "#myTextarea2", function() {
    // Getting the current value of textarea
    var currentText = $(this).val();

    // Setting the Div content
    $(".output2").text(currentText);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group col-md-5">
  <label for="Sympton" class="control-label">Observed Symptom</label>
  <div class="output1"></div>
</div>
<div class="form-group col-md-5">
  <label for="Why" class="control-label">Why?</label>
  <textarea id="myTextarea1" class="form-control" name="Why" cols="20" rows="3"></textarea>
</div>
<div class="form-group col-md-2">
</div>
<div class="form-group col-md-5">
  <label for="Sympton" class="control-label">Symptom 2</label>
  <div class="output2"></div>
</div>
<div class="form-group col-md-5">
  <label for="Why" class="control-label">Why?</label>
  <textarea id="myTextarea2" class="form-control" name="Why" cols="20" rows="3"></textarea>
</div>
<div class="form-group col-md-2">
</div>