Allow only one element to be toggled at time

Question

I've created a list of some movie titles. If user has permission he can edit those names by pressing crtl + left click on title that he want to be changed.

P tag changes into input and on enter key ajax request is send with new name to the backend. That works fine. But I don't have any way to cancel name edit or block user from clicking on another title when one already is beeing edited

What I was trying to do is to check if user clicked something else that isn't an input and if so change back input to P tag but this isn't working.

jsFiddle .

 $(document).ready(function() { $('.nameChanger').on("mousedown", function(e) { e.preventDefault(); if (e.ctrlKey) { var $textElement = $(this); var $input = $('<input class="inputElementNew" />').val($textElement.text()); var $textValue = $textElement.text() $textElement.replaceWith($input); if ($(e.target).closest('.inputElementNew').length === 0) { //var $p = $('<p class="nameChanger" />').text($textElement.text()); console.log("back to oryginal") //$input.replaceWith($p) } //used so you can click once on link element and new page won't open $('.doubleLink').click(function() { return false; }).dblclick(function() { window.location = this.href; return false; }); var send = function() { var $p = $('<p class="nameChanger" />').text($input.val()); $input.replaceWith($p); //ajax request is here }; $input.keypress(function(e) { if (e.keyCode == 13) { console.log("changed") $input.one('focusout', send) } }); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div title="Press CRTL + left click to change name and press enter"> <a class="doubleLink" href="#"><b> <p class="nameChanger" data-title="item-1">Movie title 1</p> </b></a> </div> <div title="Press CRTL + left click to change name and press enter"> <a class="doubleLink" href="#"><b> <p class="nameChanger" data-title="item-2">Movie title 2</p> </b></a> </div>

Answer 1

 $(document).ready(function () { function mouseDown() { $('.nameChanger').on("mousedown", function (e) { e.preventDefault(); if (e.ctrlKey) { var $textElement = $(this); var $input = $('<input class="inputElementNew" />').val($textElement.text()); var $textValue = $textElement.text() $textElement.replaceWith($input); $input.focus(); if ($(e.target).closest('.inputElementNew').length === 0) { //var $p = $('<p class="nameChanger" />').text($textElement.text()); console.log("back to oryginal") //$input.replaceWith($p) } //used so you can click once on link element and new page won't open $('.doubleLink').click(function () { return false; }).dblclick(function () { window.location = this.href; return false; }); var send = function () { var $p = $('<p class="nameChanger" />').text($input.val()); $input.replaceWith($p); //ajax request is here mouseDown(); }; $(".inputElementNew").on("focusout", function () { send(); }) $input.keypress(function (e) { if (e.keyCode == 13) { send(); } }); } }); } mouseDown(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div title="Press CRTL + left click to change name and press enter"> <a class="doubleLink" href="#"><b> <p class="nameChanger" data-title="item-1">Movie title 1</p> </b></a> </div> <div title="Press CRTL + left click to change name and press enter"> <a class="doubleLink" href="#"><b> <p class="nameChanger" data-title="item-2">Movie title 2</p> </b></a> </div>

Answer 2

Your p-elements elements only get the Event-bindung once on document.ready(). The new created objects don't have an event-listener.

Best Practice would be creating the inputs and the p-elements at the same time and use css to show either one or the other and update with jquery.

If you want to use your approach you have to add the eventListener ".on" again to the P elements.

Answer 3

Please find the updated jsfiddle, Hope this solution help.

 $(document).ready(function() { $(document).on("mousedown",".nameChanger", function(e) { e.preventDefault(); if (e.ctrlKey) { var data_title = $(this).attr("data-title"); var data_val = $(this).html(); $(".inputElementNew").each(function(i,e){ $(this).replaceWith('<p class="nameChanger" data-title="'+data_title+'">'+$(this).val()+'</p>'); }) var $textElement = $(this); var $input = $('<input class="inputElementNew" data-title="'+data_title+'"/>').val($textElement.text()); var $textValue = $textElement.text() $textElement.replaceWith($input); if ($(e.target).closest('.inputElementNew').length === 0) { //var $p = $('<p class="nameChanger" />').text($textElement.text()); console.log("back to oryginal") //$input.replaceWith($p) $input.focus(); } //used so you can click once on link element and new page won't open $('.doubleLink').click(function() { return false; }).dblclick(function() { window.location = this.href; return false; }); var send = function() { var $p = $('<p class="nameChanger" />').text($input.val()); $input.replaceWith($p); //ajax request is here }; $input.keypress(function(e) { if (e.keyCode == 13) { console.log("changed") $input.one('focusout', send) } }); $(".inputElementNew").on("focusout",function(){ $(this).replaceWith('<p class="nameChanger" data-title="'+data_title+'">'+$(this).val()+'</p>'); }) } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div title="Press CRTL + left click to change name and press enter"> <a class="doubleLink" href="#"><b> <p class="nameChanger" data-title="item-1">Movie title 1</p> </b></a> </div> <div title="Press CRTL + left click to change name and press enter"> <a class="doubleLink" href="#"><b> <p class="nameChanger" data-title="item-2">Movie title 2</p> </b></a> </div>