javascript - bootstrap editable插件编辑窗口点击不出来，肿么办？
本文介绍了javascript - bootstrap editable插件编辑窗口点击不出来，肿么办？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
按照网上的教程以及官网的方法加入代码了，但是即使我点击千万次，那个editable的窗口就是不跳出来。MD，心累了。
起初觉得是js排序的问题，但无论我怎么换js的位置，窗口还是出不来。jquery也是按官网换成<script src="http://code.jquery.com/jquery... 也不行。
唯有来sf请教各位了，thanks in advance~
现在代码长这样子：
<html>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>GETWHAT路灯管理系统</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src="/Users/apple/Downloads/bootstrap-table-master/src/extensions/editable/bootstrap-table-editable.js"></script> -->
<link href="bootstrap-editable-v1/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet" />
<script src="bootstrap-editable-v1/bootstrap-editable/js/bootstrap-editable.js"></script>
<!-- Latest compiled and minified CSS -->
<link href="bootstrap-table-master/dist/bootstrap-table.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap-table-master/dist/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<style>
body{
height:100%;
width: 100%;
margin:0;
}
.container{
height:min-intrinsic;
}
.modal {
overflow: auto
}
#calculate{
padding: 20px;
}
#calculate table{
font-size: 15px;
line-height:20px;
}
</style>
<script>
<!--源代码复制自：http://www.cnblogs.com/landeanfen/p/5821192.html-->
$(function () {
$('#department').editable({
type: "select", //编辑框的类型。支持text|textarea|select|date|checklist等
source: [{ value: 1, text: "开发部" }, { value: 2, text: "销售部" }, {value:3,text:"行政部"}],
title: "选择部门", //编辑框的标题
disabled: false, //是否禁用编辑
emptytext: "空文本", //空值的默认文本
mode: "popup", //编辑框的模式：支持popup和inline两种模式，默认是popup
validate: function (value) { //字段验证
if (!$.trim(value)) {
return '不能为空';
}
}
});
});
</script>
<body>
<div class="container">
<div id="toolbar">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增账单
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改/查看
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
<a href="#" id="department">选择部门</a>
</div>
<!-- bill list table -->
<table id="table" data-toolbar="#toolbar"
data-click-to-select="true"
data-select-item-name="bill"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-page-size="50">
</table>
<!-- end bill list table -->
</div>
</body>
</html>解决方案
你的代码，除了bootstap有cdn引用外，都没有相应的在线资源引用。。。本地跑不起来，复现成本太高了。建议你把你用的库都换成CDN资源。
然后，看了一下你的代码，有个大问题就是。你的script标签在head里面，这个时候dom都还解析出来，你就获取了dom，初始化事件，当然是不成功的。
第一种这么改。
$(document).ready(function(){
$('#department').editable({
type: "select", //编辑框的类型。支持text|textarea|select|date|checklist等
source: [{
value: 1,
text: "开发部"
}, {
value: 2,
text: "销售部"
}, {
value: 3,
text: "行政部"
}],
title: "选择部门", //编辑框的标题
disabled: false, //是否禁用编辑
emptytext: "空文本", //空值的默认文本
mode: "popup", //编辑框的模式：支持popup和inline两种模式，默认是popup
validate: function(value) { //字段验证
if (!$.trim(value)) {
return '不能为空';
}
}
});
});或者第二种就是直接把script里这一串都移到body底部去。
这篇关于javascript - bootstrap editable插件编辑窗口点击不出来，肿么办？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
