動的コンテンツ用のJquery

Question

私はスパンで書かれたいくつかの単語を持つ段落を持っています。これをクリックすると編集できます。コンテンツは動的に呼び出され、現在の方法は機能しません。あなたは私にそれを行うためのよりよい方法を提案することができますか？ここ はフィドルです：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>

Answer 2

問題は.editorをクリックして編集した後、後でクリックできなかったことです。

そのための解決策は次のとおりです。

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

注：$（ "身体"）上の（ 'クリック'、 '.editor'、....）;。

Answer 3

your problem is solved u can see in snippet. 

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

.hide { 
 
    display: none; 
 
} 
 

 
.show { 
 
    display: block 
 
} 
 

 
span { 
 
    color: red; 
 
}

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