谁能想到为什么点击事件对 a 标签有效，但对 span 无效？我正在制作一个富文本编辑器，并有一个粗体按钮，单击该按钮会使文本变为粗体。它仅在我使用 anchor 元素时有效。我尝试使用跨度但没有任何反应。 html 是我唯一要更改的内容，因此我认为这不是 JavaScript 问题。
$(document).ready(function(){
//creates the toolbar~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$('#rte').focus()
var tools = [];
tools.push('underline');
tools.push('italic');
tools.push('bold');
tools.push('justifyCenter');
tools.push('justifyLeft');
tools.push('justifyRight');
var simple_toolbar = function(){
//iterates through each tool and adds its functionality to the editor
$.each(tools, function(index,value){
$('#'+value).click(function(event){
document.execCommand( value, false, null);
$('#rte').focus();
return false;
});
//end of click function
});
//end of each iterator
};
//end of simple toolbar function
//invokes the simple toolbar.
simple_toolbar();
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
});
//end of the DOM loader
<!doctype html>
<html>
<head>
<title>An HTML5 page</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="controls">
<!-- The only button working here is the bold because it is an <a> -->
<a href="#" id="bold"></a>
<span id="italic"></span>
<span id="underline"></span>
<span id="justifyLeft"></span>
<span id="justifyCenter"></span>
<span id="justifyRight"></span>
</div><!--end of controlls div-->
<div contenteditable="true" id="rte"></div>
<textarea id="my_form" rows="8" cols="58" ></textarea>
</div><!--end of the wrapper div-->
</body>
</html>
#bold{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/bold.png');
}
#italic{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/italic.png');
}
#underline{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/underline.png');
}
#justifyCenter{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/underline.png');
}
#justifyRight{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/underline.png');
}
#justifyRight{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/underline.png');
}
最佳答案
如果将 jQuery 更新到 v1.7.1，则可以使用 .on() 函数。这将允许您使用 id 将 click 方法绑定(bind)到 span。
$(document).ready(function(){
$("#yourContainer").on("click", "#yourSpanID", function(){
// The code to make everything bold
});
});
关于javascript - 为什么点击事件不能在 span 上工作，而 will 可以在 a 上工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7848177/