Question

我正在尝试在d3中创建一个在单击“submit”时不重新加载页面的表单，但是每次提交时都会完全跳过告诉它这样做的函数的内容，因此页面重新加载（即如果我在函数内部放置一个断点，它就不会停止）。这种情况发生在Firefox，Chrome和Safari中。

表单代码：

     var attachSectionSelector = function(parentSelector, audioController)
{
    var selection = d3.select(parentSelector)
        .append("form")
        .append("label")
        .text("Selection:  ");


    selection.append("label")
        .text("From: ")
        .append("input")
        .attr({
            "name": "from",
            "id":"from",
            "type":"number",
            "min":"0",
            "step":"1",
        });
    selection.append("label")
        .text("Until: ")
        .append("input")
        .attr({
            "name": "until",
            "id":"until",
            "type":"number",
            "min":"0",
            "step":"1",
        });
    /*for (var i=0; i<100; i+=1)
    {
        selectBegin.append("option").attr("value", String(i)).text(String(i));
        selectEnd.append("option").attr("value", String(i)).text(String(i));
    }*/
    selection.append("input")
        .attr({
            "name": "selection",
            "id":"selection",
            "type": "submit",
            "value": "Select"
        });

    selection.on("submit", function()
        {
            d3.event.preventDefault();
            var fromValue = document.getElementById("from").value;
            var untilValue = document.getElementById("until").value;
            if (fromValue <= audioController.getStopIndex() && untilValue >= audioController.getNotesIndex() && fromValue >= 0){
                audioController.setNotesIndex(fromValue);
                audioController.setStopIndex(untilValue);
            }
        });
};

从我所看到的“提交”之后的功能永远不会被提交调用。

Answer 1

这个表单还有其他问题我稍后可以修复，但有效的方法是简单地将附加按钮的名称和ID更改为＆＃34; selection＆＃34; （最后一个selection.append），它可能与容器冲突。

d3表单提交，似乎跳过preventDefault所以它重新加载页面时它不应该

1 个答案: