如何将新的动态内容添加到我的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在幕后做了什么!