Question

我有一个段落，其中有一些用span编写的单词，一旦你点击它就可以编辑。内容会动态调用，所以我当前的方法不起作用。你能建议我一个解决方案或更好的方法吗？这是小提琴：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

我会用以下方式解决它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

your problem is solved u can see in snippet.

＆＃13;

$(document).ready(function() {
    $('.bizcontent').click(function() {
      $('#myModal2').modal('toggle');
    });


    $(document).on('click', '.editor', function() {
      $(".edit").show();
      $(".editor").hide();
      var edit = $("#edited").val();
    });

    $('#submit').on('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();
      }
    });
  });

＆＃13;

.hide {
  display: none;
}

.show {
  display: block
}

span {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 3

你的问题是.editor一旦点击并编辑，后来无法点击，对吗？

解决方法是：

 $("body").on('click', '.editor', function(){
      $(".edit").show();
      alert("hi");
      $(".editor").hide();
      var edit = $("#edited").val();
  });

注意：$（＆＃34;正文＆＃34;）。on（＆＃39;点击＆＃39;，＆＃39; .editor＆＃39;，....）;

Jquery用于动态内容

3 个答案: