Question

我在从表单中动态添加的行中获取值时遇到问题。

我有一个“添加新行”按钮，我想使用onChange从新行中获取值。

我不知道如何使它工作

此代码添加了我的一行：

<script type="text/javascript">

$(document).ready(function(){
    var counter = 1;
    $(".add-row").click(function(){
        var markup = "<tr><td><input type='hidden' name='record'></input></td><td><select name='pris["+ counter +"][type]'><option value='ordi'>Ordinaer</option><option value='barn'>Barn</option></select>Belop<input type='text' name='pris["+ counter +"][pris]' value='0' id='pris_"+ counter +"'></input>Gebyr kr.<input class='bless' type='text' id='Gebyr_"+ counter +"' readonly disabled size='5'></input></td></tr><tr><td>&nbsp;</td><td><input type='checkbox' name='pris["+ counter +"][1]' checked>Internett</input><input type='checkbox' name='pris["+ counter +"][2]' checked>Callsenter</input><input type='checkbox' name='pris["+ counter +"][3]'>Distribusjon</input><input type='checkbox' name='pris["+ counter +"][4]'>Lokal Billettluke</input></td></tr>";
        counter++;
        $("table tbody").append(markup);
    });

我希望有一个这样的功能可以在我添加的所有行上使用：

function Gebyr1(parameter) {
    var c = 1;
    var G10 = document.getElementById("pris_" + c).value;
    if (G10 <= 99){var G10_2 = '15';}
    else if (G10 >= 100 && G10 <= 249){var G10_2 = '20';}
    else if (G10 >= 250 && G10 <= 449){var G10_2 = '25';}
    else if (G10 >= 450 && G10 <= 699){var G10_2 = '30';}
    else if (G10 >= 700 && G10 <= 949){var G10_2 = '35';}
    else if (G10 >= 950 && G10 <= 1199){var G10_2 = '40';}
    else if (G10 >= 1200 && G10 <= 1449){var G10_2 = '45';}
    else if (G10 >= 1450 && G10 <= 1699){var G10_2 = '50';}
    else if (G10 >= 1700 && G10 <= 1949){var G10_2 = '55';}
    else if (G10 >= 1950 && G10 <= 2199){var G10_2 = '60';}
    else if (G10 >= 2200 && G10 <= 2449){var G10_2 = '65';}
    else if (G10 >= 2450 && G10 <= 2699){var G10_2 = '70';}
    else if (G10 >= 2700 && G10 <= 2949){var G10_2 = '75';}
    else if (G10 >= 2950 && G10 <= 3199){var G10_2 = '80';}
    document.getElementById("Gebyr_" + c).value = G10_2;

Answer 1

使用JQuery on（）代替click（）

http://api.jquery.com/on/

$（“具有动态dom的容器的选择器”）.on（“ click”，“此容器内新行按钮的选择器”，function（）{ console.log（）; }）;

Answer 2

这将不起作用，因为一旦页面加载，将触发document.ready（）。对于动态dom元素，您需要使用@ sushil-mahajan提到的JQuery on（）API，否则可以使用如下所示的Vanilla JS：

var btn = document.createElement("button");
btn.addEventListener('click', eventHandler, false);
document.body.appendChild(btn);

然后，您可以使用eventHandler()处理所有点击。

此外，您可以使用以下代码：

document.querySelector('.className').addEventListener('click', function(event) {
  // add your event handler code here.
});

无法获取动态document.getElementById值

2 个答案: