我一直在开发一个简单的页面，但问题是——我的页面包含一个有 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');