Question

我有一个动态生成的元素：

// gathers the name of the file the user is uploading
let fileName = escape(e.target.files[0].name).slice(0,9);

let icon = $(` // this extra space is for readability on SO
        <div class="fileImage" id="${fileName}">
           <div class="glyph-stack">
              <i class="glyphicon glyphicon-file file-icon"></i>
              <i class="glyphicon glyphicon-file file-icon overlay"></i>
              <i class="glyphicon glyphicon-remove file-icon" onclick="removeFile(${fileName})"></i>
        </div>
        <span class="file-title">${fileName}</span>
        </div>`);

当我将元素附加到DOM并检查它时，$ {fileName}的所有实例都会正确显示。如果上传了一个名为freeicons.zip的文件，那么在放置$ {fileName}的任何地方都会出现“freeicons”。但是，一旦在onclick处理程序中调用removeFile函数：

 function removeFile(fileName){ 
    $('#'+fileName).remove();
 }

函数内的变量fileName不再等于“freeicons”。当我检查它时，变量被设置为 div＃freeicons.fileImage ，这是整个元素的选择器。

如果在onclick处理程序中调用removeFile（），我将$ {fileName}包装在单引号中：

`onclick="removeFile('${fileName}')"`

我在removeFile（）中获得字符串“freeicons”。

为什么在第一种情况下它会用元素选择器替换字符串？这是JQuery在创建这个小元素树时所做的事情吗？

Answer 1

fileName是一个字符串，没有引号传递给onclick处的函数的参数被解释为全局标识符

＆＃13;

function removeFile(fn) {
  console.log(fn)
}

let fileName = "abc";

let el = `<div onclick="removeFile('${fileName}')">click</div>`;

$("body").append(el);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

＆＃13;

function removeFile(fn) {
  console.log(fn)
}

let fileName = "abc";
// `abc` is not defined at `catch`, where `id` is not set to `fileName`
let el = `<div onclick="try {removeFile(${fileName})} catch(err) {console.error(err)}">click</div>`;

$("body").append(el);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

＆＃13;

为什么此字符串会更改为完整元素选择器？

id中

document元素是全局的，属性事件处理程序是全局的。如果参数周围没有引号，则会引用全局id freeicons，从而导致DOM元素#freeicon被记录在全局事件处理程序属性事件函数中

＆＃13;

function removeFile(fn) {
  console.log(fn)
}

let fileName = "abc";
// `abc` references the global `id` `"abc"`
let el = `<div id="${fileName}" onclick="try {removeFile(${fileName})} catch(err) {console.error(err)}">click</div>`;

$("body").append(el);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

＆＃13;

为什么此字符串会更改为完整元素选择器？

1 个答案: