根据某些业务逻辑动态添加和删除复选框事件？

场景：

我有一个带有复选框的结果表，当选中复选框时，行的内容（实际上只有2列连接，被复制到一个新的div，包含作业代码和作业名称）。 这很好用，我已经避免了重复。 但是，在新的结果div中，我正在创建一个锚标记来删除div本身。 删除div后，我应该能够使用复选框再次添加所选作业。 请注意，结果表中有许多作业，因此将标志设置为false将不起作用。

此外，如果您找到更好的标题，请告诉我

//On every checkbow that is clicked var flag = false; $("#ctl00_PlaceHolderMain_myGrid input").change(function () { if (this.checked && flag === false) { flag = true; var jobCode = $(this).parent().parent().parent().find("td:eq(2)").text() var jobName = $(this).parent().parent().parent().find("td:eq(1)").text() var displayvalue = jobCode.toUpperCase() + " - " + jobName.toUpperCase(); AddSelectedJob(jobCode, displayvalue); //$(this).unbind('change'); //Unbind the change event so that it doesnt fire again FillSelectedJobs(); } }); //Add selected job in the results div function AddSelectedJob(id, display) { //create a div for every selected job $("[id$=ResultsDiv]").append('
' + display + 'Remove selected job
'); } //Removes the selected job from the resutls div function removeSelectedJob(el) { $(el).parent().remove(); } 

生成的html是这样的：

 
 
 
 
 
 
 
JobCode
JobName
JobPartner
JobManager
ClientName
 
 
  
jobcode01
jobname
xx
xx
xx
 
 
 
 
 
 Selected : 
 
  

Answer 1

首先，我建议对您的HTML进行一些更改。 从DOM中分离出样式并将它们放在类中。

这确保了关注点的分离

HTML

 
 
 
 
 
 
 
 
JobCode
 
JobName
 
JobPartner
 
JobManager
 
ClientName
 
 
 
  
 
column1
 
column2
 
column3
 
column4
 
column5
 
 
 
 
 
 Selected : 
  

CSS

 .divMain{ height: 300px; overflow: auto; float: left } .table{ color:#333333; width:100%; border-collapse:collapse; } .rowHead{ color:White; background-color:#5D7B9D; font-weight:bold; } .row{ color:#333333; background-color:#F7F6F3; } .m0{ margin-top: 0px; } .selected{ margin-left: 10px; float: left } 

使用Javascript

 $("#ctl00_PlaceHolderMain_myGrid input").change(function () { // Next cache your selector // so that you need not crawl the DOM multiple times var $this = $(this), $row = $this.closest('.row'), currFlag = Boolean($this.data('flag')); // As there might be multiple jobs , a single flag variable // will not work. So you can set a data-flag attribute on the // input that stores the current value if (currFlag === false && this.checked) { // Set the corresponding flag to true $this.data('flag', true); var jobCode = $row.find("td:eq(2)").text(), jobName = $row.find("td:eq(1)").text(), displayvalue = jobCode.toUpperCase() + " - " + jobName.toUpperCase(), inputId = $this.attr('id') // Pass the input name too as you need to set the value of // the corresponding flag value again as you can add it multiple times AddSelectedJob(jobCode, displayvalue, inputId); FillSelectedJobs(); } }); //Add selected job in the results div function AddSelectedJob(id, display, inputId) { //create a div for every selected job // Use the inputId to save it as a data-id attribute // on anchor so that you can set the value of the flag after // removing it var html = '
' + display ; html += 'Remove selected job
'; $('[id$=ResultsDiv]').append(html); } // Remove the inline click event for the anchor and delgate it to the // static parent container $('[id$=ResultsDiv]').on('click', 'a', function(e) { var $this = $(this), $currentCheckbox = $this.data('id'); // Set the flag value of the input back to false $('#'+ $currentCheckbox).data('flag', false); e.preventDefault(); // prevent the default action of the anchor $this.closest('.selectedjobs').remove(); }); function FillSelectedJobs() { //save values into the hidden field var selectedJobs = $("[id$=ResultsDiv]").find("[class$='selectedjobs']"); var returnvalue = ""; for (var i = 0; i < selectedJobs.length; i++) returnvalue += selectedJobs[i].id + ";"; $("[id$=HiddenClientCode]").val(returnvalue); } 

检查小提琴