如何设置从字符串构建的HTML中的事件？

我已经使用Bootstrap dialog box来获取文件输入，用户首先选择文件类型，然后选择文件 - 我想通过扩展来限制文件的选择类型。如何设置从字符串构建的HTML中的事件？

引导对话由一个字符串内置，我想添加一个onchange事件选择在下面，我希望将更新文件输入accept扩展的 - 但它给出了一个错误setType is not defined。

如何正确动态捕获选定的类型并将其设置在输入中的accept中，其中HTML是从字符串构建的？

var HTMLmessage = 'Type: <select onchange="setType(this)"> ..Option list </select> <br> <input type="file" accept=' + getType() + '>';

来源

2016-11-22 SachiDangalla

后对矫正/加元，您可以简单地使用jQuery这一点。并使用on(change)事件jQuery。这是FIDDLE。

的代码

$(document).on("change", '#load-file-type', function(event) { 
    getType = $(this).find('option:selected').attr('data-ext'); 
    $('#load-file').attr('accept',getType); // simply using this you can set it in the `accept` in file input. 
});

件，它允许您在变化触发事件。

来源

2016-11-22 06:43:49 hemsbhardiya

当你选择一个文件，然后更改选项再次 - 再扩展未被过滤。为什么？ – SachiDangalla

我试过了，扩展名正在为我过滤。不知道天气我检查错误的东西。您想要在扩展更改后清除选定的文件吗？ – hemsbhardiya

需要事件委托https://jsfiddle.net/0c3d0885/1/。当你正在DOMload

document.getElementById('load-file-type').onchange = function setType(op) { 
    console.log(op); 
    getType = op.dataset.dataExt; 
}

来源

2016-11-22 06:37:40

您可以使用事件冒泡来捕获在运行时创建的元素。类似于jQuerys事件代表团。

这是你可以做的。

var optionList = [{ 
 
    name: "XML", 
 
    id: "xmlVAL", 
 
    extension: ".xml" 
 
}, { 
 
    name: "JSON", 
 
    id: "jsonVAL", 
 
    extension: ".json" 
 
}, { 
 
    name: "CSV", 
 
    id: "csvVAL", 
 
    extension: ".csv" 
 
}]; 
 
var typeOptions = (function(arr) { 
 
    var str = ""; 
 
    arr.map(function(type) { 
 
    var op = "<option value=" + type.id + " data-ext=" + type.extension + " >" + type.name + "</option>"; 
 
    str += op; 
 
    }); 
 
    return str; 
 
})(optionList); 
 

 
var getType = ".xml"; 
 

 
function setType(op) { 
 
    // console.log(op); 
 
    getType = op.dataset.dataExt; 
 
} 
 
var message = ' Type: <select id="load-file-type" >' + typeOptions + ' </select> <br> File: <input id="load-file" type="file" style="display:inline" accept=' + getType + ' >' 
 

 
document.getElementById("result").addEventListener("change", function(event) { 
 
    var target = event.target; 
 
    if (target.tagName.toLowerCase() !== "select") { 
 
    return; 
 
    }; 
 
    console.log(target.options[target.selectedIndex].dataset.ext); 
 
}); 
 

 
document.getElementById("result").innerHTML = message;

<div id="result"> 
 

 
</div>

来源

2016-11-22 06:48:45 Sreekanth

如何设置从字符串构建的HTML中的事件？

回答

相关问题