[英]Allow only one element to be toggled at time
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.
如果用户有权限,他可以通过按crtl + 左键单击他想要更改的标题来编辑这些名称。
P tag changes into input and on enter key ajax request is send with new name to the backend. P 标签变为输入,并在输入键 ajax 上将请求以新名称发送到后端。 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.我想做的是检查用户是否单击了其他不是输入的内容,如果是,则将输入改回 P 标签,但这不起作用。
$(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>
Your p-elements elements only get the Event-bindung once on document.ready().您的 p-elements 元素仅在 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.最佳实践是同时创建输入和 p 元素,并使用 css 显示其中之一,并使用 jquery 进行更新。
If you want to use your approach you have to add the eventListener ".on" again to the P elements.如果您想使用您的方法,您必须再次将 eventListener“.on”添加到 P 元素。
Please find the updated jsfiddle, Hope this solution help.请找到更新的 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.