JQuery 逻辑未应用于动态创建的 html
JQuery logic isn't being applied to dynmically created html
我编写了以下JavaScript/JQuery代码。从 HTML 下拉菜单中选择选项时,将触发此代码。它将所选值与已添加到 HTML 表中的值进行比较:
$('#addonSelectOptions').on('change', function(e){
e.preventDefault();
var selectedAddon = $('#addonSelectOptions option:selected').val();
var selectedText = $('#addonSelectOptions option:selected').text();
var currentAddons = $('#acg_addons').val();
if(selectedAddon == '0') {
$('#availableAddOns > tbody:last').empty();
$('#availableAddOns > tbody:last').append('<tr id="noaddonShown"><td>No add-ons</td></tr>');
$('#acg_addons').val(' ');
} else {
var addonStrings = currentAddons.toString();
var addonCheck = 'addOn-'+selectedAddon;
$(".selectedAddonTableTR").each(function() {
var rowID = $(this).attr('id');
if(rowID == addonCheck) {
alert('You have already added this Add On to this Game');
return false;
} else {
$('#noaddonShown').empty();
$('#availableAddOns > tbody:last').append('<tr id="addOn-'+selectedAddon+'" class="selectedAddonTableTR"><td>'+selectedText+'</td></tr>');
var addons = $('#acg_addons').val();
$('#acg_addons').val(addons+''+selectedAddon+',');
}
});
}
});
如果我从表中已存在的下拉列表中选择一个选项,则会显示警报(这是应该做的)。然后,如果我选择一个不在 HTML 表中的选项,它会将其添加到表中(这是正确的)。但是,如果我选择新添加的选项,则会触发警报,但随后会第二次添加到表中。它只应该显示警报,而不是第二次添加它。
我从代码中缺少什么来防止这种情况?
编辑:
基于缺少MCVE,以下是下拉HTML:
<select id="addonSelectOptions">
<option value="0">--No Addon--</option>
<option value="2">Add On 1</option>
<option value="1">Add On 2</option>
</select>
这也是使用的 HTML 表:
<table id="availableAddOns">
<tbody>
<tr id="addOn-1" class="selectedAddonTableTR">
<td>Add On 1</td>
</tr>
</tbody>
</table>
这应该会让你走上正确的道路。你没有很好地解释你的问题,但我认为这会让你朝着正确的方向前进。阅读我的评论,如果您需要有关正在发生的事情的更详细的解释,请告诉我。
$('#addonSelectOptions').on('change', function(e){
e.preventDefault();
var select = $(this), //Don't use var declaration more than once
selectedAddon = $(select).val(),
selectedAddonIdString = 'addOn-' + selectedAddon,
selectedText = $(select).find('option:selected').text(),
availableAddOns = $('#availableAddOns'), // Cache your DOM elemtns, don't select them more than once
currentAddonArr = []; //Use an array to store multiple values... I don't know what you were trying to do with addons = $('#acg_addons').val();
if(selectedAddon == '0') {
$(availableAddOns).find('> tbody:last').empty();
//You didn't prove any HTML, but you can't dynamically add an HTML element here, but then reference it below since it may not exist
//If this part of the if statement never fires, the #noaddonShown element will not exist
$(availableAddOns).find('> tbody:last').append('<tr id="noaddonShown"><td>No add-ons</td></tr>'); // Rework this
} else {
if($.inArray(selectedAddonIdString, currentAddonArr) === -1) {
//You don't need to run empty funtions on an element that will simply show the same information over and over again if a condition is met.
//Instead use $('#noaddonShown').hide(); $('#noaddonShown').show(); to toggle the element
$('#noaddonShown').empty(); // rework this
$(availableAddOns).find('> tbody:last').append('<tr id="addOn-'+selectedAddon+'" class="selectedAddonTableTR"><td>'+selectedText+'</td></tr>');
//var addons = $('#acg_addons').val(); not needed
//$('#acg_addons').val(addons+''+selectedAddon+',');
} else {
alert('You have already added this Add On to this Game');
return false;
}
}
});
相关文章:
- 从Javascript和Php变量创建Html模板文档
- 为非列表项目创建HTML实时搜索
- 使用javascript动态创建html内容/元素
- 如何使用jQuery动态创建HTML输入
- 在 JQUERY 中创建 HTML 后,Jquery 方法不起作用
- 使用HTML标记中的JS变量在Javascript中动态创建HTML
- 如何使用jQuery和乘法行和列创建HTML表
- MVC 4:使用 JQUERY 和 PartViewResult 动态创建 HTML 文本框.如果代码是动态添加的,如何
- 如何将函数绑定到使用链接函数创建 HTML 的角度指令
- 我需要使用AngularJS从JSON文件创建HTML元素
- 从Ajax Arraybuffer响应类型创建HTML画布
- 创建HTML对象的Javascript与创建HTML字符串的比较
- 在动态创建html元素之后,是否可以触发事件
- 如何在动态创建html时实现分层标题组织
- 如何从输入到url的路径创建html文件
- 从sql server中用javascript创建HTML表
- 如何在表单中创建html元素,而无需重新加载页面
- 做全栈JavaScript框架在客户端或服务器上创建HTML
- 使用JQuery创建HTML父标记
- 在服务器端创建html元素VS将数据作为JSON获取,并使用javascript创建标签