Question

我正在使用键盘功能，这对第一个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);
    });

});

我实际上是使用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 } } ?>
      });

Answer 1

我认为问题可能是因为动态添加第二个和以后的文本框。因此，delegate the events使这个场景成功是明智的：

＆＃13;

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

＆＃13;

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

＆＃13;

keyup不适用于多个textareas

1 个答案: