如何将新的动态内容添加到我的JS代码中
How to add new dynamic content to my JS code?
我一直在开发一个简单的页面,但存在问题——我的页面包含一个有2列的表;如果用户将光标移动到第二列,它将转换为可编辑字段,用户可以对其进行编辑并执行一些操作。该页面还包含用于分页的链接;如果用户单击链接,例如"2",则表将使用Ajax/Jquery动态更改其内容。所以,我的代码适用于初始屏幕,但如果我更改页面,则无法编辑第二列中的任何字段,即用于编辑的代码现在不起作用。那么,请告诉我,我该怎么修?JS代码:
<script type="text/javascript" charset="utf-8">
function hide_info_block(block_id) {
$('#info_block').hide();
}
$(function()
{
var old_value='No translate';
var item_id='';
var item;
$('.field').hover(
function()
{
old_value=$(this).text();
item_id=$(this).attr('id');
item=$(this).parent('td');
new_value=(old_value=='Not translated') ? '' : old_value;
$(this).empty();
var field="<div id='save_button' class='btn btn-primary' style='float: right' href='#'>Save</div><form>"+
"<div style='overflow: hidden; padding-right: .5em;'>"+
"<input id='new_value' type='textarea' name='term' style='width: 100%;' value='"+new_value+"'/></div></form>";
$(this).html(field);
},
function()
{
$(this).empty();
$(this).html(old_value);
});
$('#save_button').live('click', function() {
if ($.trim($('#new_value').val()).length==0)
{
alert ('The string is empty');
return;
}
var loader="<td><img id='small_loader' style='position:absolute' src='/small_loader.gif' /></td>";
item.after(loader);
var old_val=old_value;
var new_val=$.trim($('#new_value').val());
$.post("http://"+document.location.host+"/index.php/welcome/update_record", { old_value: old_val,
value: new_val, id: item_id} ,
function(data) {
var message="Message";
var json = jQuery.parseJSON(data);
var item_id=json.id.replace(/([!"#$%&'()*+,./:;<=>?@'[''']^`{|}~])/g, "''$1");
if (json.result=='LOGIN') {
message="You need to enter before making any actions";
$('#'+item_id).html(json.old_value);
}
else {
if (json.result=='OK') {
$('#'+item_id).css('color', '#000000');
message="Your correction has been added successfully";
$("#"+item_id).html(json.language_value);
}
else {
message="Your correction has been updated successfully";
$('#'+item_id).html(json.language_value);
}
}
$('#small_loader').remove();
alert(message);
});
});
$('.page_button').live('click',function() {
$('#ajaxBusy').show();
$('.selected_page_button').attr('class','page_button');
$(this).attr('class','selected_page_button');
$.post("http://"+document.location.host+"/index.php/welcome/update_records_set/"+this.id,
function(data)
{
if (data != "")
{
$(".records_content:last").empty();
$(".records_content").html(data);
}
$('#ajaxBusy').hide();
});
});
});
</script>
表代码:
<div class="records_content">
<table>
<tbody>
<?php
$i=0;
foreach ($records as $record) {
//echo "<tr class = 'output' style='border-bottom: 1px dotted silver;'>";
echo "<tr class = 'output' style='border-bottom: 1px dotted silver;'>";
echo "<td width='400'>" . strip_tags($record['translate']['language_value']) . "</td>";
if ($record['translate']['coalesce(loc.language_value)'])
{
echo "<td width='200' height='30'><div class='field' id='".$record['translate']['label_value']."/".$record['language_id']."'>".
strip_tags($record['translate']['coalesce(loc.language_value)'])."</div>";
if (count($record['alternatives']))
{
echo "<br/><b>Alternatives:</b>";
echo "<ul>";
foreach ($record['alternatives'] as $alternative)
{
echo "<li>".strip_tags($alternative['coalesce(loc.language_value)'])."</li>";
}
echo "</ul>";
}
}
else
{
echo "<td width='200'>"."<div class='field' style='font-style: italic; color: #FF0000' id='".$record['translate']['label_value']."/".$record['language_id']."'>Not translated</div>";
if (count($record['alternatives']))
{
echo "<br/><b>Alternatives:</b>";
echo "<ul>";
foreach ($record['alternatives'] as $alternative)
{
echo "<li>".strip_tags($alternative['coalesce(loc.language_value)'])."</li>";
}
echo "</ul>";
}
}
echo "</td>";
$i++;
}
?>
</tbody>
</table>
</div>
更新2:
$('body').on({
mouseenter: function(event)
{
old_value=$(this).text();
item_id=$(this).attr('id');
item=$(this).parent('td');
new_value=(old_value=='Not translated') ? '' : old_value;
$(this).empty();
var field="<div id='save_button' class='btn btn-primary' style='float: right' href='#'>Save</div><form>"+
"<div style='overflow: hidden; padding-right: .5em;'>"+
"<input id='new_value' type='textarea' name='term' style='width: 100%;' value='"+new_value+"'/></div></form>";
$(this).html(field);
},
mouseleave: function(event)
{
$(this).empty();
$(this).html(old_value);
}}, '.field');
您只向.field
添加了一次hover
处理程序。当您通过AJAX加载.field
来更改它时,它就变成了一个没有任何事件处理程序的不同元素。
在加载新的CCD_ 5之后附加CCD_。
或
使用委托的事件处理程序。
$('body').on({
mouseenter: function() {
//code when mouse enters .field
},
mouseleave: function() {
//code when mouse leaves .field
}
}, '.field');
尝试在Google Chrome中运行它,然后按F12,这样就可以使用JavaScript调试器了。使用[控制台]选项卡查看是否出现任何错误。令人惊讶的是,你可以从中学习到什么,以及JavaScript在幕后做了什么!
相关文章:
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 将当前时间添加到我的页面上的特定部分
- 将淡入淡出添加到“我的身体背景滑块”
- 可以Resharper在我的javascript函数声明中添加分号
- 如何将JavaScript库添加到我的C#MVC项目中
- 更新数据,而不是用javascript和jquery将其添加到我的表中
- 如何为我的分页添加格式
- 在我的网站上以纯文本形式添加最新推文
- 在 DOM 就绪时,删除现有的 HTML 属性并添加我的
- 如何使用JavaScript函数(onclick)在URL中添加我的“No”或“ID”
- 为什么我不能在这个特定函数中添加我的数组
- 我如何根据需要在表格中添加我的 td
- 如何添加我的照片流
- 如何在我的facebook页面上添加我的画布应用程序's选项卡
- 如何在jquery中添加我的2个单选按钮值
- 添加一个额外的单词来添加我的所有URL
- 我想添加我的客户的屏幕截图按钮's页面,然后希望将其保存在数据库中,并将其作为仪表板显示在另一个页面中
- 如何添加我的自定义HTML页面(js和css)到wordpress页面
- 我如何添加我的csrf令牌到我的$.destroy -在Rails 3 &Javascript