html oninput事件问题中的javascript

I have this code bellow that creates an range input and showing it's value and it works fine except in Edge.

我有这个代码,它创建一个范围输入并显示它的值,除了Edge之外它工作正常。

function showUnitBar(units) {
    $("#unit_bar").remove();
    $('.svg-container').append('<div id="unit_bar">'
        + '<input type="range" id="unit_input" value="1" min="1" max="' + (units - 1) + '"  oninput="unit_output.value = unit_input.value">'
        + '<output id="unit_output">1</output>'
        + '<input type="button" value="Send Units" id="send_units">'
        + '</div>');
}

showUnitBar(5);

HTML

<div class="svg-container"></div>

http://jsfiddle.net/L10r5zvv/46/

The thing is that the value dosen't update in Edge.

问题是Edge中的值不会更新。

I found this code http://jsfiddle.net/L10r5zvv/47/ and it works in Edge but I having problem to solve it to my code because I'm worthless at mixing html and javascript/jQuery.

我发现这个代码http://jsfiddle.net/L10r5zvv/47/并且它在Edge中工作,但我有问题要解决它到我的代码因为我在混合html和javascript / jQuery毫无价值。

2 个解决方案

#1

Try this (Notice that I added the code you said worked in the correct place [ in the oninput]):

试试这个(注意我添加了你说的代码在[oninput]中的正确位置):

function showUnitBar(units) {
    $("#unit_bar").remove();
    $('.svg-container').append('<div id="unit_bar">'
        + '<input type="range" id="unit_input" value="1" min="1" max="' + (units - 1) + '"  oninput="document.getElementById('unit_output').innerHTML = this.value">'
        + '<output id="unit_output">1</output>'
        + '<input type="button" value="Send Units" id="send_units">'
        + '</div>');
}

showUnitBar(5);

#2

I solved it. I added this code bellow my existing and now it works with Edge also

我解决了我在现有代码中添加了此代码,现在它也适用于Edge

$('#unit_input').on('input', function() { 
    $('#unit_output').html(this.value);
});

#1