我希望我的应用程序执行以下操作。有 2 个有序列表。一个有元素，另一个是空的。当我将鼠标悬停在文本旁边的第一个列表上时，必须出现一个图像，当我单击该图像时，该文本必须移动到另一个有序列表。如果我单击文本，则不会发生任何事情。根据我第一次点击时所做的，一切正常。如果我点击文字我不会移动，当我点击图片我移动。但在那之后一切都出错了。当我单击图像时，它显示两次我选择的内容，当我第三次单击它时，它显示三次我选择的内容，在第一次选择之后，我能够单击文本将其移动到另一个列表。请帮我解决这个问题。提前致谢。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script type = "text/javascript" src = "js/jquery.js"></script>
<script type = "text/javascript" src = "js/jquery_ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#feedback { font-size: 1.4em; }
#firstlist .ui-selecting { background: #FECA40; }
#firstlist .ui-selected { background: #F39814; color: white; }
#firstlist { list-style-type: none; margin: 0; padding: 0; width: 20%; }
#firstlist li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
#firstlist li:hover img { display: block; }
#seclist .ui-selecting { background: #FECA40; }
#seclist .ui-selected { background: #F39814; color: white; }
#seclist { list-style-type: none; margin: 0; padding: 0; width: 20%; }
#seclist li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
img
{
position:relative;
left:232px;
top:-25px;
display:none;
}
</style>
</head>
<body>
<table id="myTable">
<td>
<tr>
<ol id="firstlist">
<li>Item 1 <img src="next.jpg" id="next1"></li>
<li>Item 2 <img src="next.jpg" id="next2"></li>
<li>Item 3 <img src="next.jpg" id="next3"></li>
<li>Item 4 <img src="next.jpg" id="next4"></li>
<li>Item 5 <img src="next.jpg" id="next5"></li>
</ol>
</tr>
<tr>
<ul class = "seclist" id = "seclist">
</ul>
</tr>
</td>
</table>
<script language="javascript">
//function to display the immage
function show(id,disp) {
if (disp == true) {
id.style.display = "block";
}
if (disp == false) {
id.style.display = "none";
}
}
</script>
<script>
$(function(){
$( "#firstlist" ).selectable();
});
$(function() {
$( "#seclist" ).selectable();
});
$("img").click(function() {
$('#firstlist li').click(function(){
var $this = $(this),
text = $this.text();
$('<li />', {html: text}).appendTo('ul.seclist')
});
});
</script>
</body>
</html>
最佳答案
您错误地嵌套了事件处理程序。每次点击<img>它正在将一个新的事件处理程序附加到 #firstlist li ，这将在您的 img 中每次出现任何内容(包括您的 <li> 标签)时触发一个事件。被点击。每次点击 <img>标记它附加一个新事件(不清除旧事件)并触发现有的附加事件。这就是为什么第一次点击没有响应，第二次触发一次，第三次触发两次，依此类推。
尝试改变这个:
$("img").click(function() {
$('#firstlist li').click(function(){
var $this = $(this),
text = $this.text();
$('<li />', {html: text}).appendTo('ul.seclist')
});
});
对此:
$('#firstlist li img').click(function(){
var $this = $(this),
text = $this.parent().text();
$('<li />', {html: text}).appendTo('ul.seclist')
});
关于javascript - 移动列表功能无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24884488/