[英]jquery Click To EDIT improving suggestion needed
I have an Example what I get this from one of my previous post .I am trying to upgrade this with my need but I failing . 我有一个示例,我从上一篇文章中得到了这个。我正在尝试根据我的需要进行升级,但是我失败了。 I guess it's because of my lack of knowledge in jquery and JavaScripts . 我想这是因为我对jquery和JavaScripts缺乏了解。 But I need this badly . 但我非常需要这个。
Here is Live demo in js fiddle 这是js小提琴中的现场演示
What I have now: 我现在拥有的:
There you can see I have a button . 在那里你可以看到我有一个按钮。 If I click the button it will open a Div with Editable input , where I can rename the input and save . 如果我单击按钮,它将打开Div with Editable输入,我可以在其中重命名输入并保存。 you can create many div by clicking the button and rename as you want . 您可以通过单击按钮创建许多div并根据需要重命名。 Also you can Click the texts again to change the name whenever you want . 您也可以再次单击文本以随时更改名称。
What I am trying to do 我想做什么
What I was trying to Do is that ,I added a "EDIT" text there . 我试图做的是,我在那里添加了一个“编辑”文本。
What I am mainly trying is .. if I Create a DIV and try to rename again ,without Clicking the text to bring Edit mode . 我主要尝试的是 ..如果我创建一个DIV并尝试重新命名,而不单击文本带来编辑模式。 I would like to click EDIT text to bring the Edit mode . 我想点击编辑文本以进入编辑模式。 Clicking name Should not bring any Edit mode . 单击名称不应带任何编辑模式。
I am not finding any way to do that . 我找不到任何办法。 May be because of my lacking of knowledge . 可能是因为我缺乏知识。 If there is any solution or way it will be Excellent . 如果有任何解决方案或方式,它将是优秀的。
My code : 我的代码:
HTML HTML
<button id="createDiv">Start</button>
<div id="results"></div>
CSS CSS
#createDiv, #results span { cursor: pointer; }
#results div {
background: #FFA;
border: 1px solid;
width:auto;
}
#results input[type=text] {
border: none;
display: none;
outline: none;
}
.clickToCancleIcon{
float: right;
}
.new-folder{
height:30px;
float:left;
}
JS JS
// Call for document .onload event
$(function() {
// Normal Click event asignement, same as $("#createDiv").click(function
$("#createDiv").on("click", function(e) {
// Simply creating the elements one by one to remove confusion
var newDiv = $("<div />", { class: "new-folder" }), // Notice, each child variable is appended to parent
newInp = $("<input />", { name: "inpTitle[]",style:"display:block ;float:left; border:solid 1px #fa9a34", type: "text", value: "Unnamed Group", class: "title-inp" }).appendTo(newDiv),
newSpan = $("<span />", { id: "myInstance2",style:"display:none; float:left;", text: "Unnamed Group", class: "title-span" }).appendTo(newDiv),
clickToCancle = $("<a />", { text: "X", class: "clickToCancleIcon" }).appendTo(newDiv),
clickToEdit = $("<span />", { text: "Edit" , style:"float:right; margin:0px 5px;" ,
class: "clickToEdit" }).appendTo(newDiv);
// Everything created and seated, let's append this new div to it's parent
$("#results").append(newDiv);
});
// the following use the ".delegate" side of .on
// This means that ALL future created elements with the same classname,
// inside the same parent will have this same event function added
$("#results").on("click", ".new-folder .title-span", function(e) {
// This hides our span as it was clicked on and shows our trick input,
// also places focus on input
$(this).hide().prev().show().focus();
});
$("#results").on("blur", ".new-folder .title-inp", function(e) {
// tells the browser, when user clicks away from input, hide input and show span
// also replaces text in span with new text in input
$(this).hide().next().text($(this).val()).show();
});
// The following sures we get the same functionality from blur on Enter key being pressed
$("#results").on("keyup", ".new-folder .title-inp", function(e) {
// Here we grab the key code for the "Enter" key
var eKey = e.which || e.keyCode;
if (eKey == 13) { // if enter key was pressed then hide input, show span, replace text
$(this).hide().next().text($(this).val()).show();
}
});
})
change 更改
$("#results").on("click", ".new-folder .title-span", function(e) {
$(this).hide().prev().show().focus();
});
for this 为了这
$("#results").on("click", ".new-folder .clickToEdit", function(e) {
$(this).parent().children(".title-span").hide().prev("input").show().focus();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.