我已經創建了一些電影標題的串列。如果用戶有權限，他可以通過按crtl 左鍵單擊要更改的標題來編輯這些名稱。
P 標記更改為輸入，并在輸入鍵時將 ajax 請求以新名稱發送到后端。這很好用。但是我沒有任何方法可以取消名稱編輯或阻止用戶在已經在編輯一個標題時點擊另一個標題
我試圖做的是檢查用戶是否單擊了不是輸入的其他內容，如果是，則將輸入更改回 P 標簽，但這不起作用。
js小提琴。
$(document).ready(function() {
$('.nameChanger').on("mousedown", function(e) {
e.preventDefault();
if (e.ctrlKey) {
var $textElement = $(this);
var $input = $('<input />').val($textElement.text());
var $textValue = $textElement.text()
$textElement.replaceWith($input);
if ($(e.target).closest('.inputElementNew').length === 0) {
//var $p = $('<p />').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 />').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>uj5u.com熱心網友回復：
$(document).ready(function () {
function mouseDown() {
$('.nameChanger').on("mousedown", function (e) {
e.preventDefault();
if (e.ctrlKey) {
var $textElement = $(this);
var $input = $('<input />').val($textElement.text());
var $textValue = $textElement.text()
$textElement.replaceWith($input);
$input.focus();
if ($(e.target).closest('.inputElementNew').length === 0) {
//var $p = $('<p />').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 />').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>uj5u.com熱心網友回復：
您的 p-elements 元素僅在 document.ready() 上獲得一次 Event-bindung。新創建的物件沒有事件監聽器。
最佳實踐是同時創建輸入和 p 元素，并使用 css 顯示其中一個或另一個并使用 jquery 進行更新。
如果您想使用您的方法，您必須將 eventListener ".on" 再次添加到 P 元素中。
uj5u.com熱心網友回復：
請找到更新的 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 data-title="' data_title '">' $(this).val() '</p>');
})
var $textElement = $(this);
var $input = $('<input data-title="' data_title '"/>').val($textElement.text());
var $textValue = $textElement.text()
$textElement.replaceWith($input);
if ($(e.target).closest('.inputElementNew').length === 0) {
//var $p = $('<p />').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 />').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 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/470287.html
標籤：javascript jQuery
上一篇：通過ajax發布后獲取關聯陣列