jQuery x 动态不工作的可编辑值更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26051987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
x editable value change on dynamically not working
提问by abhi
i have using x editable file for by bootstrap application. now i have a situation where i need to change the value on my span by a button click.value is changing but if i am click on that x editable span,previous value is populated on the text box this is my sample code
我使用了 x 可编辑文件作为 bootstrap 应用程序。现在我有一种情况，我需要通过单击按钮更改跨度上的值。值正在更改，但如果我单击该 x 可编辑跨度，则文本框中会填充上一个值，这是我的示例代码
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Patient portal</title>
<meta name="description" content="3 styles with inline editable feature" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="assets/css/bootstrap-editable.css" />
</head>
<body ><!-- #section:basics/navbar.layout -->
<div>
<span class="editable" id="city"> intial value </span>
<button id="change">change value</button>
</div>
<script type="text/javascript">
window.jQuery || document.write("<script src='assets/js/jquery.min.js'>"+"<"+"/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/x-editable/bootstrap-editable.min.js"></script>
<script src="assets/js/x-editable/ace-editable.min.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
$( document ).ready(function() {
$.fn.editable.defaults.mode = 'inline';
$.fn.editableform.loading = "<div class='editableform-loading'><i class='ace-icon fa fa-spinner fa-spin fa-2x light-blue'></i></div>";
$.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="ace-icon fa fa-check"></i></button>'+
'<button type="button" class="btn editable-cancel"><i class="ace-icon fa fa-times"></i></button>';
$('#city').editable({
type: 'text',
name: 'FirstName',
title: 'enter First Name',
validate: function(value) {
if($.trim(value) == '')
return ' First Name is required';
else if($.trim(value).length>30)
return 'Only 50 charateres are allowed';
}
});
$('#change').click(function(){
$('#city').text("changed value")
});
})
</script>
</body>
here city span is populated with 'intial value' first and while i am click on that span a text box will appear with value 'intial value' ,then if i click on change button span value will be changed to 'changed value'.then if i click on the span again text box is showing the previous value 'intial value' .how can i fix this issue any help will be appreciated
这里的城市跨度首先填充“初始值”，当我点击该跨度时，将出现一个文本框，其值为“初始值”，然后如果我点击更改按钮跨度值将更改为“更改值”。然后如果我再次单击跨度文本框显示以前的值“初始值”。我该如何解决这个问题，任何帮助将不胜感激
this is jfiddle link jfiddle
这是 jfiddle 链接 jfiddle
回答by Mysteryos
回答by Sandip Vora
Here is your solution. You only need to do is set value on changed button click too. You only need to add this line $('#city').editable('setValue', "changed value", true);in '#change' button's click. For more detail refer this my jsfiddle code : http://jsfiddle.net/smvora_4u/epf7frz4/
这是您的解决方案。您只需要在更改的按钮单击上设置值。您只需要$('#city').editable('setValue', "changed value", true);在“#change”按钮的点击中添加这一行。有关更多详细信息，请参阅我的 jsfiddle 代码：http: //jsfiddle.net/smvora_4u/epf7frz4/
