He creado una lista de algunos títulos de películas. Si el usuario tiene permiso, puede editar esos nombres presionando crtl + clic izquierdo en el título que desea cambiar.
La etiqueta P cambia a entrada y, al ingresar, la solicitud ajax se envía con un nuevo nombre al backend. Eso funciona bien. Pero no tengo ninguna forma de cancelar la edición del nombre o bloquear al usuario para que no haga clic en otro título cuando ya se está editando uno.
Lo que estaba tratando de hacer es verificar si el usuario hizo clic en otra cosa que no es una entrada y, de ser así, cambiar la entrada a la etiqueta P, pero esto no funciona.
jsviolín .
$(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> $(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>Sus elementos p-elements solo obtienen el enlace de eventos una vez en document.ready(). Los nuevos objetos creados no tienen un detector de eventos.
La mejor práctica sería crear las entradas y los elementos p al mismo tiempo y usar css para mostrar uno u otro y actualizar con jquery.
Si desea utilizar su enfoque, debe agregar eventListener ".on" nuevamente a los elementos P.
Encuentre el jsfiddle actualizado, espero que esta solución ayude.
$(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>