使用jquery设置输入值

我正在尝试创建一个简单的html文件，其中包含员工的每月工资，并且必须计算每个工资的应付税款！我使用一个“添加”按钮添加更多的employee textfield，它创建了一个包含类似div的新div类！在salary textfield的onchange事件中，我无法设置相应员工的纳税值

不幸的是，我不能上传截图，所以我把所有的代码，使我的问题尽可能清楚

这是html代码：

<div id="all_emps">
    <div class="em_area">
        <label>Employee 1</label>
        <input type=text required  />
        <label>Position</label>
        <input type=text required  />
        <label>Monthly Salary</label>
        <input class=em_sal type=text required  size=10 />
        &nbsp &nbsp &nbsp 
        <label>Salary Tax</label>
        <input class=em_tax type=text required size=10 readonly />
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        <a href="#" id="add_emp">Add</a>
        &nbsp &nbsp &nbsp &nbsp &nbsp
        <a href="#" id="del_emp">Remove</a>
    </div>  
</div>

员工1
位置
月薪
 
薪俸税
    
   

以下是jquery代码：

$(document).ready(function(){
var counter = 2;
$("#add_emp").click(function () {
var newTextBoxDiv = $(document.createElement('div'))
     .attr("class", 'em_area' + counter);

newTextBoxDiv.after().html('<br><label>Employee '+counter+' </label> <input id=em_name name=em_name type=text required  /> <label>Position</label> <input id=em_post name=em_post type=text required  /> <label>Monthly Salary</label> <input class=em_sal name=em_sal size=10 type=text required  /> &nbsp &nbsp &nbsp <label>Salary Tax</label> <input class=em_tax type=text size=10 required />  ' );
newTextBoxDiv.appendTo("#all_emps");
counter++;
 });

 $("#del_emp").click(function () {
if(counter==2)
{
    alert("Can not remove the only employee!");
}
else{
    counter--;
    $(".em_area" + counter).remove();
}
 });
  $('#em_area').on('change' , '.em_sal', function() { // Fire the change event

var salary = parseInt(this.value);
var dueTax = 0;
if(salary < 5000){  
    alert('Salary less than 5000!!');
}
else if(salary >= 5000)
{
    due_tax= salary/100;
    due_tax= salary - due_tax;
}
// This will get the corresponding tax input for the employee..
$(this).closest('div').find('.em_tax').val(due_tax) ;
});
});

$（文档）.ready（函数（）{
var计数器=2；
$（“添加emp”）。单击（函数（）{
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“类”，“em_区域”+计数器）；
newTextBoxDiv.after（）.html（“
员工”+柜台+”职位月薪工资税“）；
newTextBoxDiv.appendTo（“#all_emp”）；
计数器++；
});
$（“#del#emp”）。单击（函数（）{
如果（计数器==2）
{
警报（“无法删除唯一员工！”）；
}
否则{
计数器--；
$（“.em_区域”+计数器）.remove（）；
}
});
$（'#em_区域'）。在（'change'，'.em_sal'，function（）{//激发更改事件
var salary=parseInt（此.value）；
增值税=0；
如果（工资<5000）{
警惕（‘工资低于5000！！’）；
}
其他条件（工资>=5000）
{
应付税款=工资/100；
应付税款=工资-应付税款；
}
//这将为员工获得相应的税务输入。。
$（this）.closest（'div'）.find（'em_tax'）.val（到期税）；
});
});

重构了一点。您现在有一个

all\u emp

div，每个员工有一个

div

，带有

id=“em”

html部分：

<div id="all_emps">
    <div id="em1">
        <label>Employee 1</label>
        <input type=text required  />
        <label>Position</label>
        <input type=text required  />
        <label>Monthly Salary</label>
        <input class=em_sal type=text required  size=10 />
        &nbsp &nbsp &nbsp 
        <label>Salary Tax</label>
        <input class=em_tax type=text required size=10 readonly />
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

    </div> 
    <a href="#" id="add_emp">Add</a>
        &nbsp &nbsp &nbsp &nbsp &nbsp
     <a href="#" id="del_emp">Remove</a>    
</div>​​​​​​

员工1
位置
月薪
 
薪俸税
    
   
​​​​​​

js部分

$(document).ready(function() {
    var counter = 2;
    $("#add_emp").click(function() {
        var newTextBoxDiv = $(document.createElement('div'));
        newTextBoxDiv.attr("id", 'em' + counter);

        newTextBoxDiv.html('<br><label>Employee ' + counter + ' </label> <input id=em_name name=em_name type=text required  /> <label>Position</label> <input id=em_post name=em_post type=text required  /> <label>Monthly Salary</label> <input class=em_sal name=em_sal size=10 type=text required  /> &nbsp &nbsp &nbsp <label>Salary Tax</label> <input class=em_tax type=text size=10 required />  ');

        $("#all_emps div").last().after(newTextBoxDiv);
        counter++;
    });

    $("#del_emp").click(function() {
        if (counter == 2) {
            alert("Can not remove the only employee!");
        } else {
            counter--;
            $("#em" + counter).remove();
        }
    });
    $('#all_emps').on('change', '.em_sal', function() { // Fire the change event
        var salary = parseInt(this.value);
        var due_tax= 0;
        if (salary < 5000) {
            alert('Salary less than 5000!!');
        } else{
            due_tax = salary / 100;
            due_tax = salary - due_tax;
        }
        // This will get the corresponding tax input for the employee..
        $(this).closest('div').find('.em_tax').val(due_tax);
    });
});

$（文档）.ready（函数（）{
var计数器=2；
$（“#添加#emp”）。单击（函数（）{
var newTextBoxDiv=$（document.createElement（'div'）；
newTextBoxDiv.attr（“id”，“em”+计数器）；
newTextBoxDiv.html（“
员工”+柜台+“职位月薪工资税”）；
$（“#所有_empsdiv”）.last（）之后（newTextBoxDiv）；
计数器++；
});
$（“#del#emp”）。单击（函数（）{
如果（计数器==2）{
警报（“无法删除唯一员工！”）；
}否则{
计数器--；
$（“#em”+计数器）.remove（）；
}
});
$（'#all_emps'）。on（'change'，'.em_sal'，function（）{//触发更改事件
var salary=parseInt（此.value）；
应交增值税=0；
如果（工资<5000）{
警惕（‘工资低于5000！！’）；
}否则{
应付税款=工资/100；
应付税款=工资-应付税款；
}
//这将为员工获得相应的税务输入。。
$（this）.closest（'div'）.find（'em_tax'）.val（到期税）；
});
});

---

​

我想我需要使用.after（）而不是.last（）来增量添加em div！而且计数器必须初始化为2！它在JSFIDLE中运行良好，但在我的计算机中不起作用！有什么问题吗？jquery文件不支持代码的某些部分吗？为了确定问题是否出在我的jquery文件上，我链接了一个jquery的更新源，它是：但是当我在em_sal textfield中输入数字时，它什么也不做！请帮帮我@分销商嗯，我做了一些编辑，所以也许你没有得到正确的一个。。。也许试着在回答中重新复制代码。但我想我得到了正确的代码，只需在JSFIDLE中将您的代码复制并粘贴到我的本地文件中！