javascript - Jquery 用于动态内容

Question

我有一个段落，里面有一些用span写的单词，点击它就可以编辑。内容将被动态调用，所以我当前的方法不起作用。您能给我建议一个解决方案或更好的方法吗？这是 fiddle :http://jsfiddle.net/9dq2p7dw/109/谢谢:)

 <h4>Currently working in <span class="editor">xyz*</span><span style= 
"display:none;" class="edit"><input type="text" class="form-control input-
 sm" id="edited" style="width:100px;z-index: 100;background: white;display: 
  inline;"></span><button type="submit" id="submit" class="edit" 
  style="display: none;">save</button>


      for past <span>0-5 years*</span>.Studied Graduation from <span>ABC.</span>, 12th from <span>jnnj</span> with <span>80%</span>, 10th from <span>Bkbjkjnk</span> with <span>80%</span></h4>

这是它的 jquery。

$(document).ready(function(){
    $('.bizcontent').click(function(){
      $('#myModal2').modal('toggle');

    });

    $(".editor").click(function(){
      $(".edit").show();
      $(".editor").hide();
      var edit = $("#edited").val();



    });

    $("#submit").click(function(){
      var edit = $("#edited").val();
      var ans = confirm("Update your input as "+ edit + " ?");

      if (ans== true) {

      $(".edit").hide();
      $(".editor").replaceWith("<span class='editor'>" + edit + "</span>");
      $(".editor").show();

    }

    else{
      $(".editor").show();
      $(".edit").hide();
    }


    });
});

Answer 1

我会通过以下方式解决它。

$(document).ready(function() {

  // how the input and the text should be displayed
  // {{text}} is replaced with the text
  var template = {
    input: '<edit><input type="text" class="form-control input-sm" style="width:100px;display:inline;" value="{{text}}" orig="{{text}}"/><button type="submit" class="edit">save</button></span>',
    text: '<span>{{text}}</edit>'
  }

  // for when you click on the span
  $("#theText").on('click', 'span', function() {
    var span = $(this)
    span.replaceWith(template.input.replace(/{{text}}/g, span.text()))
  })

  // when you click the button
  $("#theText").on('click', 'button', function() {
    var edit = $(this).parent()
    var newValue = edit.find('input').val()
    var origValue = edit.find('input').attr('orig')

    var value = confirm("Update your input as " + newValue + " ?") ? newValue : origValue

    edit.replaceWith(template.text.replace(/{{text}}/g, value))

  })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 id="theText">Currently working in 
  
  <span>xyz*</span>for past <span>0-5 years*</span>.Studied Graduation from <span>ABC.</span>, 12th from <span>jnnj</span> with <span>80%</span>, 10th from <span>Bkbjkjnk</span> with <span>80%</span>

</h4>