Question

在我的网页上我写道：

HTML：

<div id="faketxt" contenteditable>Write Here</div>
    <button id='btn'>OK</button>
<div id='casella'></div>

CSS：

#faketxt {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

#casella{
    width: 150px;
    height: 300px;
    font-size: 10px;
    border-style: solid;
}

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中创建文本？我无法理解。

Answer 1

您有三个侦听器（包括onclick函数），#btn将以异步方式运行 - 将文本复制到div 下载之前 - 见下面的演示：

＆＃13;

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() {
  var primo = document.getElementById('faketxt');
  var secondo = document.getElementById('casella');
  secondo.innerHTML = primo.innerHTML;
  downloadInnerHtml(fileName, 'casella', 'text/html');
});

＆＃13;

#faketxt {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  height: 28px;
  overflow: auto;
  padding: 2px;
  resize: both;
  width: 400px;
}
#casella {
  width: 150px;
  height: 300px;
  font-size: 10px;
  border-style: solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="faketxt" contenteditable>Write Here</div>
<button id='btn'>OK</button>

<button class="fontStyle" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"><i>I</i>
</button>
<button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
</button>
<button class="fontStyle" onclick="document.execCommand( 'underline',false,null);"><u>U</u>
</button>
<button class="fontStyle" onclick="document.execCommand( 'fontSize',false,5);">S
</button>
<button class="fontStyle" onclick="document.execCommand( 'foreColor',false,'#ff0000');">R
</button>

<div id='casella'></div>

＆＃13;

Answer 2

你正在使用#btn上的click事件绑定2个处理程序，这就是为什么空文件被下载的原因，因为两个处理程序都将异步执行。

你应该只绑定一个，并在你复制innerHTML的第一个和之后调用下载函数

if (!isset($_POST['Adventure Challenge Award']))

https://jsfiddle.net/5e8dzq2h/

Answer 3

你使用错误元素的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));

我编辑了你的小提琴，这是解决方案：https://jsfiddle.net/qnztbucg/3/

Answer 4

之所以发生这种情况，是因为第二次调用了第一个处理程序（$("body").on("click", "#btn", ...）。

为什么？

因为这个处理程序附加到body元素，并且在body接收到事件时会触发，所以在$('#btn').click()触发后。

要避免此问题，请使用$('#btn').click()代替on synthax。

修正版：https://jsfiddle.net/qnztbucg/2/

如何在Jquery中先行动？

4 个答案: