Question

我有一个表，每行中都有一些带有复选框的单元格，如果用户单击该复选框，页面会显示一个带有表单的div，供用户输入他/她的名字。然后使用输入的名称替换该复选框，这是一个锚点，单击该链接允许用户将单元格重置回复选框。我使用jquery来做到这一点，问题是即使链接被恢复为复选框，当我单击复选框时，它应该使用表单启动div，浏览器正在响应，就好像它是用户名链接...

希望一切都有意义 - 过程是这样的：

点击复选框 - ＆gt;显示表单＆gt;用户提交表单 - ＆gt;表单隐藏，名称插入到td单元格，替换复选框，作为链接 - ＆gt;如果用户点击链接 - >确认返回复选框 - ＆gt;确认后，用复选框替换链接

这一切都很好，接下来会发生什么

点击复选框 - ＆gt;确认消息返回复选框显示 - ＆gt;拒绝，然后显示隐藏的表单

那很糟糕。它应该和以前一样。似乎虽然我正在使用jquery更改单元格中的代码，但浏览器（FF5.0）保留（虽然隐藏）前一个链接代码并将复选框置于其上（如果我滚动复选框，浏览器将显示链接目的地）。

我使用唯一的ID和类来调用函数。不确定我在这里做错了什么或如何解决它。

显示表单的代码：

/*show make item active form*/
    $("#showActiveNameForm").live('change', function() {


        if($(this).is(':checked') == true) { 

            //get record id
            var thisID = $(this).attr("thisID");

            //get the td cell index

            var row = $(this).parent().parent();
            var rowIndex = $(row[0].rowIndex);

            var colIndex = row.children().index($(this).parent());
            cellIndex = rowIndex[0] + "," + colIndex; 


            //store the record id in the session
            manageSessionData("set", "thisID", thisID);

            //store the td cell index in the session
            manageSessionData("set", "cellIndex", cellIndex);

            $.blockUI({ 
                message: $('#activeForm'),
                css: { 
                    border: '2px solid #000', 
                    padding: '5px', 
                    backgroundColor: '#ffffff',
                    width: '200px' 
                }  
            });

        }

    });

将复选框更改为html链接的相关代码

//write the value to the cell
$('#productTableBody').children('tr:eq(' + y + ')').children('td:eq(6)').html("<a href=\"javascript:void(0);\" class=\"changeActive\">" + elementValue + "</a>");

将链接更改回复选框的代码：

//changeActive back to checkbox
    $(".changeActive").live('click', function() { 

        //get record id
        var thisId = $(this).attr("thisID");            

        var answer = confirm("Are you sure you want to change the active status of this item?");

        if (answer) { 

            //write the value to the database
            dataString = "thisId::" + thisId + "@@activename::@@active::off"; 

            //pass data to db manager via ajax
            $.ajax({
                type: "POST",
                url: "lib/includes/ajaxDatabaseManager.php",
                data: "dataString=" + dataString + "&table=scheduleTable&queryType=update",
                success: function(data){
                    console.log(data);
                }
            });

            //change the content of the cell
            $(this).html("<input type=\"checkbox\" id=\"showActiveNameForm\" class=\"setActive\" thisId=\"" + thisId + "\">");

        } else { 
            console.log("No confirm");
        }

        //

    });

在td中更改html的问题

0 个答案: