无法将操作链接绑定到html按钮

时间:2016-02-18 13:44:32

标签: javascript jquery html

我在我的javascript文件中创建了一个动态链接,它生成一个动态链接,以便用户下载文件。我会链接将链接放在按钮内,以便用户按下按钮而不是链接。但是,当我将链接放在按钮内部时,似乎链接不再绑定到按钮。不知道我做错了什么,我看到他们按照我的方式做的例子。

HTML

<button class="k-button" id="ResultButton" style="display: none;"></button>

这是我在&#34; index.cshtml文件中创建按钮的地方。

javascipt的

   var csvData = data.result;
            var buffer = csvData;
            var uri = "data:text/csv;charset=utf8," + encodeURIComponent(buffer);
            var fileName = "resultCSV.csv";

            var link = document.createElement("a");
            if (link.download !== undefined) { // feature detection
                // Browsers that support HTML5 download attribute
                link.setAttribute("href", uri);
                link.setAttribute("download", fileName);
            }
            else if (navigator.msSaveBlob) { // IE 10+
                link.addEventListener("click", function (event) {
                    var blob = new Blob([buffer], {
                        "type": "text/csv;charset=utf-8;"
                    });
                    navigator.msSaveBlob(blob, fileName);
                }, false);
            }

            link.innerHTML = "Export to CSV";
           // I think I may be doing this incorrect
            document.getElementById("ResultButton") .appendChild(link);
            $("#ResultButton").show();

        } else {
            alert("Your Search Cameback Empty Please Check Your Selections And Retry");
        }

我想我可能做错了。似乎当我尝试将此链接绑定到我的按钮时,它会覆盖链接。因为当我document.body.appendChild(link); 它正确地给我链接时,但当我将它绑定到按钮时它只是刷新网页。

2 个答案:

答案 0 :(得分:1)

我认为是因为你将link作为按钮的子项追加,然后点击按钮不会启动点击链接。所以不是

document.getElementById("ResultButton") .appendChild(link);
$("#ResultButton").show();

这是你sholud给

$("#ResultButton").click(function(){
      link.click();
});

答案 1 :(得分:1)

这会使它看起来像一个按钮。

>  var myATag = '<a href="somelink" type="button" class="k-button"
> id="ResultButton"/>';

删除按钮代码。创建一个div并在函数结束时执行。

 $("#mydiv").html(myATag);