一次只允許切換一個元素

Question

我已經創建了一些電影片名的列表。 如果用戶有權限，他可以通過按crtl + 左鍵單擊他想要更改的標題來編輯這些名稱。

P 標簽變為輸入，並在輸入鍵 ajax 上將請求以新名稱發送到后端。 那很好用。 但是我沒有任何方法可以取消名稱編輯或阻止用戶在一個已經被編輯的標題上點擊另一個標題

我想做的是檢查用戶是否單擊了其他不是輸入的內容，如果是，則將輸入改回 P 標簽，但這不起作用。

js小提琴。

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

您的 p-elements 元素僅在 document.ready() 上獲得一次事件綁定。 新創建的對象沒有事件偵聽器。

最佳實踐是同時創建輸入和 p 元素，並使用 css 顯示其中之一，並使用 jquery 進行更新。

如果您想使用您的方法，您必須再次將 eventListener“.on”添加到 P 元素。

Answer 3

請找到更新的 jsfiddle，希望此解決方案有所幫助。

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