Question

有很多代码要看，所以我把它放在http://jsfiddle.net/mikegriffinn/S7pvz/的小提琴里。

这是一个html表，它是一个可编辑的红绿灯记分卡，使用JQuery进行本地存储。

记分卡编辑按钮正常工作，直到我从本地存储加载已保存的表。

当我加载本地存储时，编辑按钮不再使用编辑表单打开对话框窗口小部件。当我清除本地存储时，它们再次工作。控制台中没有错误。有什么想法吗？

由于表格中有很多行并且更新了html中的表单代码，我只是把JavaScript放在这里。您可以查看小提琴中的完整代码。

这是JavaScript

$(document).ready(function(){
$( "#dialog" ).dialog({
     autoOpen: false,     
     buttons: {
         Update: function() {
              // Set the variables equal to the values in the form input fields
              // eg <input type = "text" id="test1">
            var r1 = $( "#r1").val(),
                g1 = $( "#g1").val(),
                p1 = $( "#p1" ).val(),
                p2 = $( "#p2" ).val(),
                p3 = $( "#p3" ).val(),
                p4 = $( "#p4" ).val(),
                p5 = $( "#p5" ).val(),
                p6 = $( "#p6" ).val(),
                row = $( this ).data( "editingRow" );

            //find the cells matching the form input fields and insert the value in the fields
            row.find("td").eq(1).text( r1 );
            row.find("td").eq(2).text( g1 );
            row.find("td").eq(3).text( p1 );
            row.find("td").eq(4).text( p2 );
            row.find("td").eq(5).text( p3 );
            row.find("td").eq(6).text( p4 );
            row.find("td").eq(7).text( p5 );
            row.find("td").eq(8).text( p6 );
            colorUp();
            $( this ).dialog("close");
         },
     Cancel: function() {
            $( this ).dialog( "close" );
        }
     }
});
//create the click handler for the edit button
$( ".abtn" ).on( "click", function() {
  //set the value of the row variable
    var row = $( this ).closest("tr");
//find the values in each of the cells in that row
    var rName = row.find( "td" ).eq( 0 ).text(),
        r1 = row.find( "td" ).eq( 1 ).text(),
        g1 = row.find( "td" ).eq( 2 ).text(),
        p1 = row.find( "td" ).eq( 3 ).text(),
        p2 = row.find( "td" ).eq( 4 ).text(),
        p3 = row.find( "td" ).eq( 5 ).text(),
        p4 = row.find( "td" ).eq( 6 ).text(),
        p5 = row.find( "td" ).eq( 7 ).text(),
        p6 = row.find( "td" ).eq( 8 ).text();
//set the value of the input boxes to the current value in the cells
    $( "#r1" ).val( r1 );
    $( "#g1" ).val( g1 );
    $( "#p1" ).val( p1 );
    $( "#p2" ).val( p2 );
    $( "#p3" ).val( p3 );
    $( "#p4" ).val( p4 );
    $( "#p5" ).val( p5 );
    $( "#p6" ).val( p6 );

//change the title of the dialog box to Editing Row Name
// use the data(key, value) method to store a reference to the <tr>
// open the dialog box
    $( "#dialog" )
        .dialog( "option", {
            title: "Editing " + rName
            })
        .data( "editingRow", row )
        .dialog( "open" );
});


    function colorUp() {
       $('#heat-map-3 > tbody > tr').each(function (i, row) {
          for (var i = 3; i < 9; i++) {
             var $row = $(row),
                $r1 = parseInt($row.find( "td" ).eq( 1 ).text()),
                $g1 = parseInt($row.find( "td" ).eq( 2 ).text()),
                $pVal = parseInt($row.find( "td" ).eq( i ).text()),

                red = 'rgb(255,0,0)';
                yellow = 'rgb(255,204,0)';
                green = 'rgb(0,255,0)';
                var clr;

                if ($r1 < $g1) {
                    if  ( $pVal < $r1 ) {
                      clr = red;
                    }
                    else if  ($r1 === $pVal || $pVal < $g1) {
                       clr = yellow;
                    }
                    else {
                      clr = green;
                    }
                 }
                 else  {
                    if  ( $pVal > $r1 ) {
                      clr = red;
                    }
                    else if  ($r1 === $pVal || $pVal < $g1) {
                       clr = yellow;
                    }
                    else {
                      clr = green;
                    }
                 }



                $row.find( "td" ).eq( i ).css({backgroundColor:clr});
             }
       })
    }
    colorUp();

    $( "#saveSc" ).click(function(){
       var scorecard = $('#scorecard').html();
       localStorage.setItem('scorecard', scorecard);
       return false;
    });


   $( " #loadSc ").click(function() {
        if(localStorage.getItem('scorecard')) {
            $('#scorecard').html(localStorage.getItem('scorecard'));
        }
    });

    $('#clearSc').click( function() {
    window.localStorage.clear();
    location.reload();
    return false;
    });

 });

Answer 1

我用更正来更新你的小提琴：http://jsfiddle.net/S7pvz/14/

问题来自你的js结构：在$(document).ready你正在为点击行为创建编辑按钮：

$(".abtn").on("click", function() { ... }

但是，当您从localstorage加载项目时，您正在执行以下操作：

$('#scorecard').html(localStorage.getItem('scorecard'));

或者您所有的编辑按钮都包含在您要覆盖的记分卡中，因此点击行为将被删除。

要更改它，我在一个函数中包含了click管理，在您的document.ready中调用，也在localStorage加载之后：请参阅activateEditButtons()

$(document).ready(function(){
    $("#dialog").dialog({
        autoOpen: false,     
        buttons: {
            Update: function() {
                // Set the variables equal to the values in the form input fields
                // eg <input type = "text" id="test1">
                var r1 = $("#r1").val(),
                    g1 = $("#g1").val(),
                    p1 = $("#p1").val(),
                    p2 = $("#p2").val(),
                    p3 = $("#p3").val(),
                    p4 = $("#p4").val(),
                    p5 = $("#p5").val(),
                    p6 = $("#p6").val(),
                    row = $(this).data("editingRow");

                //find the cells matching the form input fields and insert the value in the fields
                row.find("td").eq(1).text(r1);
                row.find("td").eq(2).text(g1);
                row.find("td").eq(3).text(p1);
                row.find("td").eq(4).text(p2);
                row.find("td").eq(5).text(p3);
                row.find("td").eq(6).text(p4);
                row.find("td").eq(7).text(p5);
                row.find("td").eq(8).text(p6);
                colorUp();
                $(this).dialog("close");
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });

    function activateEditButtons() {
        //create the click handler for the edit button
        $(".abtn").on("click", function() {
            //set the value of the row variable
            console.log(this);
            var row = $(this).closest("tr");

            //find the values in each of the cells in that row
            console.log("before find val");
            var rName = row.find("td").eq(0).text(),
                r1 = row.find("td").eq(1).text(),
                g1 = row.find("td").eq(2).text(),
                p1 = row.find("td").eq(3).text(),
                p2 = row.find("td").eq(4).text(),
                p3 = row.find("td").eq(5).text(),
                p4 = row.find("td").eq(6).text(),
                p5 = row.find("td").eq(7).text(),
                p6 = row.find("td").eq(8).text();

            console.log("before set val");
            //set the value of the input boxes to the current value in the cells
            $("#r1").val(r1);
            $("#g1").val(g1);
            $("#p1").val(p1);
            $("#p2").val(p2);
            $("#p3").val(p3);
            $("#p4").val(p4);
            $("#p5").val(p5);
            $("#p6").val(p6);

            //change the title of the dialog box to Editing Row Name
            // use the data(key, value) method to store a reference to the <tr>
            // open the dialog box
            console.log("before dialog opening");
            $("#dialog")
                .dialog("option", {
                    title: "Editing " + rName
                })
                .data("editingRow", row)
                .dialog("open");
        });
    }

    function colorUp() {
        $('#heat-map-3 > tbody > tr').each(function (i, row) {
            for (var i = 3; i < 9; i++) {
                var $row = $(row),
                    $r1 = parseInt($row.find("td").eq(1).text()),
                    $g1 = parseInt($row.find("td").eq(2).text()),
                    $pVal = parseInt($row.find("td").eq(i).text()),
                    red = 'rgb(255,0,0)';

                yellow = 'rgb(255,204,0)';
                green = 'rgb(0,255,0)';
                var clr;

                if ($r1 < $g1) {
                    if ($pVal < $r1) {
                        clr = red;
                    } else if ($r1 === $pVal || $pVal < $g1) {
                        clr = yellow;
                    } else {
                        clr = green;
                    }
                }
                else  {
                    if ($pVal > $r1) {
                        clr = red;
                    } else if ($r1 === $pVal || $pVal < $g1) {
                        clr = yellow;
                    } else {
                        clr = green;
                    }
                }
                $row.find("td").eq(i).css({backgroundColor:clr});
            }
        });
    }

    activateEditButtons();
    colorUp();

    $("#saveSc").click(function() {
        var scorecard = $('#scorecard').html();
        localStorage.setItem('scorecard', scorecard);
        return false;
    });

    $("#loadSc").click(function() {
        if(localStorage.getItem('scorecard')) {
            $('#scorecard').html(localStorage.getItem('scorecard'));
            activateEditButtons();
        }
    });

    $('#clearSc').click(function() {
        window.localStorage.clear();
        location.reload();
        return false;
    });
});

JQuery加载本地存储在单击时禁用对话框打开

1 个答案: