javascript - javascript无法调用未定义的方法“替换”

Question

$(document).ready(function() 
{
    var oldText, newText;
    $(".editable").hover(
        function()
        {
            $(this).addClass("editHover");
        }, 
        function()
        {
            $(this).removeClass("editHover");
        }
    );

    $(".editable").bind("dblclick", replaceHTML);


    $(".btnSave").live("click", 
                    function()
                    {
                        newText = $(this).siblings("form")
                                         .children(".editBox")
                                         .val().replace(/"/g, """);

                        currentId = $(this).parent().attr("id");
                        $.ajax({
                        type:   "POST",
                        url:    "./musa_date_edit_ajax.php",
                        data:   "vidpubdate="+newText+"&id=" + currentId,
                        success: function(msg){
                            //alert("test ok");
                        } 
                        });

                        $(this).parent()
                               .html(newText)
                               .removeClass("noPad")
                               .bind("dblclick", replaceHTML);
                    }
                    ); 

    $(".btnDiscard").live("click", 
                    function()
                    {
                        $(this).parent()
                               .html(oldText)
                               .removeClass("noPad")
                               .bind("dblclick", replaceHTML);
                    }
                    ); 

    function replaceHTML()
                    {
                        oldText = $(this).html()
                                         .replace(/"/g, """);
                        $(this).addClass("noPad")
                               .html("")
                               .html("<form><input type=\"text\" class=\"editBox\" value=\"" + oldText + "\" /> </form><button type=\"button\" class=\"btnSave\" >planifier</button> <!-- <button type=\"button\" class=\"btnDiscard\" >Annuler</button> -->")
                               .unbind('dblclick', replaceHTML);

                    }
}
); 

IE/Chrome 说：
无法调用未定义的方法“替换”

参考以下代码：

                newText = $(this).siblings("form")
                                 .children(".editBox")
                                 .val().replace(/"/g, """);

奇怪的是它在 Firefox 上运行得非常好。
我想这与似乎未定义的 $this 有关。但由于我不是 JS/Jquery 大师，我不知道如何在 Chrome 和 IE 上修复它。

附录：
这或多或少是 HTML 的样子：

<form>
    blabla
    <table>
        <tr>
            <td>blabla</td>
            <td class="editable" id="<?php echo $data['id']; ?>" ><?php echo $data['date'];?></td>
        </tr>
    </table>
</form>

更新：

<form>
    <table>
        <td>some useless stuff</td>
        <td class="editable noPad" id="1732">
            <form>
                <input class="editBox" value="22/05/13" type="text">
            </form>
            <button type="button" class="btnSave">planifier</button>
            <!-- <button type="button" class="btnDiscard">Annuler</button> -->
        </td>
    </table>
</form>

Answer 1

可能只是您缩短的 html 片段中的拼写错误，但您在 html 中使用了“editable”类，在 javascript 中使用了“editbox”类。

$('.editbox')返回空，因此.val()返回未定义，因此replace()导致异常

要确定父/兄弟的东西是否正确，您需要在 html 中显示更多细节

编辑：怎么样：

$(this).parent().find('.editBox').val().replace(...

Answer 2

尝试这个：

$(this).closest("td").find(".editBox").val().replace(/"/g, """);

另外，提个建议。您可以最小化您当前的代码：

$(".editable").hover(
function () {
    $(this).addClass("editHover");
},
function () {
    $(this).removeClass("editHover");
});

通过做这个：

$(".editable").hover(
function () {
    $(this).toggleClass("editHover");
});