我尝试在编辑卡上执行某些功能,例如Trello卡,即提供一些选项,提示您编辑,移动或复制卡片。
我这样做的示例代码就像这样
$(document).ready(function() {
$('i').click(function() {
text = $(this).parentsUntil('ul').text();
$('body').addClass('bckg');
console.log(text);
// alert(text);
$(this).parentsUntil('li').append('<textarea class="textarea">' + text + '</textarea><ul class="opts"><li><a href="#">Edit</a></li><li><a href="#">change icon</a></li><li><a href="#">delete</a></li></ul><br><br><br><button class="btn btn-success">Save</button>');
});
$('body').on('blur', 'textarea', function() {
textarea = $(this).val()
$(this).parentsUntil('ul').text(textarea);
$(this).remove();
// $(this).sibling('button').remove();
$('body').removeClass('bckg');
console.log(textarea);
})
})
&#13;
.textarea {
position: absolute;
left: 0px;
z-index: 100;
float: left;
}
.opts {
position: absolute;
left: 150px;
top: 0px;
z-index: 100;
list-style-type: none;
/*background: #FFF;*/
}
.opts li {
padding: 15px;
background: rgba(0, 0, 0, .8);
}
.bckg {
background: rgba(0, 0, 0, .6);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
<li style="position: relative;">Option1 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
<li style="position: relative;">Option2 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
<li style="position: relative;">Option3 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
</ul>
&#13;
上面的脚本工作正常,因为我想用<li>
中的文本替换<textarea>
文本,但问题出在jQuery事件.blur()
之后我丢失了编辑图标{{我将事件处理程序绑定到它。因此我无法从第二次开始调用它。如何更改文本并使用其事件处理程序保持编辑图标?感谢。
答案 0 :(得分:1)
这将帮助您嵌套ul
;
$(document).ready(function() {
})
var child;
$('body').on('click','i',function() {
$('body').addClass('bckg');
var text = $(this).closest("li").clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
child = $(this).closest("li").children();
$(this).closest("li").append('<textarea class="textarea">' + text + '</textarea><ul class="opts"><li><a href="#">Edit</a></li><li><a href="#">change icon</a></li><li><a href="#">delete</a></li></ul><br><br><br><button class="btn btn-success">Save</button>');
});
$('body').on('blur', 'textarea', function() {
textarea = $(this).val()
var appendItem = textarea;
$(this).closest("li").text('').empty().append(appendItem).append(child);
$('body').removeClass('bckg');
})
.textarea {
position: absolute;
left: 0px;
z-index: 100;
float: left;
}
.opts {
position: absolute;
left: 150px;
top: 0px;
z-index: 100;
list-style-type: none;
/*background: #FFF;*/
}
.opts li {
padding: 15px;
background: rgba(0, 0, 0, .8);
}
.bckg {
background: rgba(0, 0, 0, .6);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
<li style="position: relative;">Option1 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a> <ul> <li style="position: relative;">Option1 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></li> </ul> </li>
</ul>
答案 1 :(得分:0)
检查以下解决方案,
$(document).ready(function() {
})
$('body').on('click','i',function() {
$('body').addClass('bckg');
var text = $(this).parent().parent().text();
$(this).parent().parent().append('<textarea class="textarea">' + text + '</textarea><ul class="opts"><li><a href="#">Edit</a></li><li><a href="#">change icon</a></li><li><a href="#">delete</a></li></ul><br><br><br><button class="btn btn-success">Save</button>');
});
$('body').on('blur', 'textarea', function() {
textarea = $(this).val()
var appendItem = textarea + '<a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a>'
$(this).parent().text('').empty().append(appendItem);
$('body').removeClass('bckg');
})
.textarea {
position: absolute;
left: 0px;
z-index: 100;
float: left;
}
.opts {
position: absolute;
left: 150px;
top: 0px;
z-index: 100;
list-style-type: none;
/*background: #FFF;*/
}
.opts li {
padding: 15px;
background: rgba(0, 0, 0, .8);
}
.bckg {
background: rgba(0, 0, 0, .6);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
<li style="position: relative;">Option1
<a href="JavaScript:void(0)">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</li>
<li style="position: relative;">Option2 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
<li style="position: relative;">Option3 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
</ul>