Javascript 在Jquery中，如何在一个操作之前执行另一个操作？

在我的网页中，我写道：

HTML:

jQuery：

$("body").on("click", "#btn", function(){
    var primo = document.getElementById('faketxt');
    var secondo = document.getElementById('casella');
    secondo.innerHTML=primo.innerHTML;
});

function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    var link = document.createElement('a');
    mimeType = mimeType || 'text/plain';

    link.setAttribute('download', filename);
    link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
    link.click(); 
}

var fileName =  'ciao.txt';

$('#btn').click(function(){
    downloadInnerHtml(fileName, 'casella','text/html');
});

它工作得非常完美，但是当它开始下载div#casella时，下载的文件是空的。我认为这是因为页面在文本出现之前就下载了div

在第二个div开始下载之前，我如何制作该div中的文本？ 我想不出来。

您有三个异步运行的

#btn

监听器（包括

onclick

函数）-下载前将文本复制到div-请参阅下面的演示：

函数下载InnerHTML（文件名、elId、mimeType）{
var elHtml=document.getElementById（elId）.innerHTML；
var link=document.createElement（'a'）；
mimeType=mimeType | |“text/plain”；
link.setAttribute（'下载'，文件名）；
link.setAttribute（'href'，'data:'+mimeType+'；charset=utf-8'，+encodeURIComponent（elHtml））；
link.click（）；
}
变量文件名='ciao.txt'；
$（'#btn'）。单击（函数（）{
var primo=document.getElementById（'faketxt'）；
var secondo=document.getElementById（'casella'）；
secondo.innerHTML=primo.innerHTML；
下载InnerHTML（文件名为“casella”，“text/html”）；
});
#faketxt{
-moz外观：textfield多行；
-webkit外观：textarea；
边框：1px纯色灰色；
字体：中-moz固定；
字体：-webkit小控件；
高度：28px；
溢出：自动；
填充：2px；
调整大小：两者；
宽度：400px；
}
#卡塞拉{
宽度：150px；
高度：300px；
字体大小：10px；
边框样式：实心；
}

写在这里
好啊
我
B
U
s
R
您正在使用btn上的click事件绑定两个处理程序，这就是为什么会下载空文件，因为两个处理程序都将异步执行

您应该只绑定一个，在第一个复制innerHTML的地方绑定一个，然后调用下载函数

$("body").on("click", "#btn", function() {
  var primo = document.getElementById('faketxt');
  var secondo = document.getElementById('casella');
  secondo.innerHTML = primo.innerHTML;
  downloadInnerHtml(fileName, 'casella', 'text/html');
});

您使用了错误元素的innerhtml:

link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));

但是，必须使用primo.innerHtml，如下所示：

var elHtml = primo.innerHtml;
link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));

我编辑了你的小提琴，这是解决方案：
这是因为第一个处理程序（
$（“body”）.on（“click”、“#btn”、…
）在第二次调用时发生的

那为什么呢

因为此处理程序附加到body元素，并且它将在body接收到事件时触发，所以在
$（'#btn'）之后。单击（）
已触发

要避免此问题，请使用
$（'#btn'）。单击（）
而不是
上的

固定版本：

link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));

var elHtml = primo.innerHtml;
link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));