Javascript 复选框'；s事件处理程序未被触发
我使用文本框来存储某些值，但仅当单击相应的复选框时。否则，文本框将被禁用。文本框和复选框是动态生成的。因此，我在方法上使用了Javascript 复选框'；s事件处理程序未被触发,javascript,jquery,checkbox,Javascript,Jquery,Checkbox,我使用文本框来存储某些值，但仅当单击相应的复选框时。否则，文本框将被禁用。文本框和复选框是动态生成的。因此，我在方法上使用了。文本框是$text、$qnty、$unit和$price，每个文本框后面跟着行id。关联的复选框称为selected[]，其类为itemCbox。为此，我的jQuery代码是： $("#listDB").on("click", ".itemCbox", function(event) { var id =
。文本框是$text
、$qnty
、$unit
和$price
，每个文本框后面跟着行id。关联的复选框称为selected[]
，其类为itemCbox
。为此，我的jQuery代码是：
$("#listDB").on("click", ".itemCbox", function(event) {
var id = this.value;
$text = $("#text"+id);
$qnty = $("#qnty"+id);
$unit = $("#unit"+id);
$price = $("#price"+id);
if ($(this).is(':checked'))
{
$text.css('background-color', '#fff');
$text.attr('disabled', false);
$qnty.attr('disabled', false);
$unit.attr('disabled', false);
$price.attr('disabled', false);
}
else
{
$text.css('background-color', 'rgba(0,0,0,0)');
$text.attr('disabled', true);
$qnty.attr('disabled', true);
$unit.attr('disabled', true);
$price.attr('disabled', true);
$text.val('');
$qnty.val('--');
$unit.val('--');
$price.val('0.00');
}
});
在对话框中选择取消选项时，我希望自动取消选中复选框，并禁用相应的文本框。为了实现这一点，我使用以下代码：
$("#cancelInsert").click(function(event){
$("input:checked[name='selected[]']").each(function () {
$(this).attr('checked', false);;
$(this).trigger('click');
});
});
$(".cancelButton").click(function (e){
$("input:checkbox[name='selected[]']").prop('checked', false);
$(".closeDialog").click();
});
这是可行的-复选框被取消选中，但是相关的文本框没有被禁用。为什么会这样？相应的事件处理程序$（“#listDB”）。在（“click”、“.itemCbox”上，函数（event）{…}
未启动。为什么会出现此问题，以及如何解决此问题
我猜这是因为只有在满足.on（“click”、“.itemCbox”
的条件时才会激活该事件，而仅仅触发click
是不够的。对吗
编辑
我已将代码修改为：
$("#cancelInsert").click(function(event){
$("input:checked[name='selected[]']").each(function () {
$(this).attr('checked', false);
console.log("Test Statement");
$(this).trigger('click');
});
});
输出表明，$（this）.attr（'checked'，false）；
行之后的所有内容都没有执行。这可能是问题所在。知道原因吗？我还得到了与取消插入按钮相关联的以下代码：
$(".closeDialog").click(function (e){
$(this).parent(".dialog").hide('200').parent(".dialogBG").fadeOut('200');
if($("#action").val()!='submitSearch'&&$search!==null)
$search.remove();
$('#searchForm')[0].reset();
});
$(".cancelButton").click(function (e){
$("input:checkbox[name='selected[]']").prop('checked', false);
$(".closeDialog").click();
});
$("#cancelEdit").click(function (e){
$("input:checkbox[name='selected[]']").prop('checked', false);
$(".closeDialog").click();
});
代码转储
我的整个HTML是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SomuFinance - Add Items to Bill</title>
<link rel="stylesheet" type="text/css" href="../../jquery-ui-1.12.1/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="../../css/indexStyle.css">
<script src="../../scripts/jquery-3.1.1.min.js"></script>
<script src="../../scripts/jquery.validate.min.js"></script>
<script src="../../jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="../../scripts/moment.js"></script>
<script src="../../scripts/addToBill.js"></script>
</head>
<body>
<form id="list" method="post" action="addToBill.php">
<div id="container">
<h1>Add Items</h1>
<input type="button" class="button" name="back" id="back" value="← Go Back to Bill" />
<select name="category_selector" id="category_selector">
<option value="All" selected>All</option>
</select>
<input type="button" class="button" name="add" id="add" value="Add Selected Items" />
<input type="button" class="button" name="edit" id="edit" value="Edit and Add" />
<input type="button" id="showSearch" class="button" name="search" value="Search" />
<input type="hidden" id="action" name="action">
<table id="listDB">
<tr>
<th>Select</th>
<th>ID</th>
<th>Sl. No</th>
<th>Item</th>
<th>Quantity</th>
<th>Unit</th>
<th>Price Based On</th>
<th>MRP</th>
<th>Seller's Price</th>
<th class="rightBorder">Last Updated On</th>
<th>Quantity Factor</th>
<th>Quantity</th>
<th>Unit</th>
<th>Price</th>
</tr>
</table>
</div>
</form>
<div class="dialogBG">
<div id="insertMessage" class="dialog">
<div class="closeDialog"></div>
</div>
</div>
<div class="dialogBG">
<div id="editItemContainer" class="dialog">
<div class="closeDialog"></div>
<h1>Edit Item</h1>
<form id="data" method="post" action="viewData.php">
<div>
<input type="hidden" id="id" name="id" required>
<div class="inp">
<label for="shop">ID : </label>
<input type="text" id="id_disp" name="id_disp" required disabled>
</div> <br>
<div class="inp">
<label for="shop">Shop : </label>
<input type="text" id="shop" name="shop" required readonly>
</div> <br>
<div class="inp">
<label for="category">Category : </label>
<input type="text" id="category" name="category" required readonly>
</div> <br>
<div class="inp">
<label for="item">Item : </label>
<input type="text" id="item" name="item" required readonly>
</div> <br>
<div class="inp">
<label for="qnty">Quantity : </label>
<input type="text" id="qnty" name="qnty" required readonly>
</div> <br>
<div class="inp">
<label for="unit">Unit : </label>
<input type="text" id="unit" name="unit" required readonly>
</div> <br>
<div class="inp">
<label for="price_based_on">Price based on : </label>
<input type="text" id="price_based_on" name="price_based_on" readonly>
</div> <br>
<hr>
<div class="inp" class=".centerAligned">
<label for="editPrice">Edit Price and Date : </label>
<input type="checkbox" id="editPrice" value="editPrice" name="editPrice">
</div>
<hr>
<div class="inp">
<label for="mrp">MRP (₹) : </label>
<input type="text" id="mrp" name="mrp" required readonly>
</div> <br>
<div class="inp">
<label for="sellers_price">Seller's Price (₹) : </label>
<input type="text" id="sellers_price" name="sellers_price" required readonly>
</div> <br>
<div class="inp">
<label for="last_updated_on">Last Updated on : </label>
<input type="date" id="last_updated_on" name="last_updated_on" required readonly>
</div>
<hr>
<div class="inp">
<label for="qf">Quantity Factor : </label>
<input type="text" id="qf" name="qf" required>
</div> <br>
<div class="inp">
<label for="calQnty">Calculated Quantity : </label>
<input type="text" id="calQnty" name="calQnty" required readonly>
</div> <br>
<div class="inp">
<label for="calUnit">Calculated Unit : </label>
<input type="text" id="calUnit" name="calUnit" required readonly>
</div> <br>
<div class="inp">
<label for="calPrice">Calculated Price (₹) : </label>
<input type="text" id="calPrice" name="calPrice" required readonly>
</div> <br>
</div>
<div class="inp">
<input id="insertBill" class="dialogButton" type="button" name="insertBill" value="Insert Item to Bill">
<input type="button" class="dialogButton cancelButton" name="cancelInsert" id="cancelInsert" value="Cancel" />
</div>
<div id="message"></div>
</form>
</div>
</div>
<div class="dialogBG">
<div id="searchDialog" class="dialog">
<div class="closeDialog"></div>
<form id="searchForm" name="searchForm" method="post" action="addToBill.php">
<h1>Search Criteria</h1>
<div class="inp">
<label for="group">Search in : </label>
<select id="field" name="field">
<option value="id">ID</option>
<option value="shop">Shop</option>
<option value="item">Item</option>
<option value="qnty">Quantity+Unit</option>
<option value="price_based_on">Price Based On</option>
<option value="MRP">MRP</option>
<option value="sellers_price">Seller's Price</option>
<option value="last_updated_on">Last Updated On</option>
</select>
</div> <br>
<div class="inp" id="criteriaDiv">
<label for="criteria">Search For : </label>
<input type="text" id="criteria" name="criteria" required>
</div> <br>
<div class="inp" id="unitDiv">
<label for="unitCriteria">Unit : </label>
<input type="text" id="unitCriteria" name="unitCriteria" required>
</div> <br>
<div class="inp" id="dateDiv">
<label for="dateCriteria">Last Updated On : </label>
<input type="date" id="dateCriteria" name="dateCriteria" required>
</div> <br>
<input type="button" id="search" class="dialogButton" name="search" value="Search" />
<input type="button" class="dialogButton cancelButton" name="cancelSearch" value="Cancel" />
</form>
</div>
</div>
</body>
</html>
SomuFinance-将项目添加到账单
添加项目
全部的
挑选
身份证件
序号
项目
量
单位
价格依据
物料需求计划
卖方价格
最近更新日期
数量因子
量
单位
价格
编辑项
身份证件：
商店：
类别：
项目：
数量：
单位：
价格基于：
编辑价格和日期：
MRP(₹) :
卖方价格(₹) :
最近更新日期：
数量系数：
计算数量：
计算单位：
计算价格(₹) :
搜索条件
搜索：
身份证件
商店
项目
数量+单位
价格依据
物料需求计划
卖方价格
最近更新日期
搜索：
单位：
最近更新日期：
生成动态生成的复选框和文本框的代码如下：
$("#category_selector").change(function(event) {
if($search!==null)
{
$search.remove();
$search = null;
}
$("#listDB").css('display', 'none');
$("#listDB").find(".catHead").remove();
$("#listDB").find(".data").remove();
if($(this).val()=="Search")
if(!$("#searchDialog").is(":visible"))
{
$("#showSearch").trigger('click');
return;
}
$("#action").val('getList');
var data = $("#list :input").serialize();
$.post($("#list").attr('action'), data, function(json)
{
if(json.listArr.length>0)
{
$.each(json.listArr, function() {
var $tr = $('<tr>', {
class : "catHead",
});
var $td = $('<td>', {
class : "catHead",
colspan : 14,
text : this.category
});
$("#listDB").append($tr.append($td));
$.each(this.value, function() {
var $tr = $('<tr>',{
class : "data"
});
var $td = $('<td>', {
html : '<input type="checkbox" class="itemCbox" id="selected[]" value="'+this.id+'" name="selected[]" /></td>'
});$tr.append($td);
$td = $('<td>', {
text : this.id
});$tr.append($td);
$td = $('<td>', {
text : this.catCount
});$tr.append($td);
$td = $('<td>', {
class : "leftAligned",
text : this.item
});$tr.append($td);
$td = $('<td>', {
class : "qnty",
text : this.qnty
});$tr.append($td);
$td = $('<td>', {
class : "unit",
text : this.unit
});$tr.append($td);
$td = $('<td>', {
class : "pbo",
text : this.price_based_on
});$tr.append($td);
$td = $('<td>', {
class : "rightAligned",
text : "₹"+this.mrp
});$tr.append($td);
$td = $('<td>', {
class : "rightAligned",
text : "₹"+this.sellers_price
});$tr.append($td);
var formattedDate = new Date(this.last_updated_on);
var d = formattedDate.getDate();
var m = formattedDate.getMonth();
m += 1; // JavaScript months are 0-11
var y = formattedDate.getFullYear();
var date = (d<10?"0":"")+d+"-"+(m<10?"0":"")+m+"-"+y;
$td = $('<td>', {
class : "rightBorder",
text : date
});$tr.append($td);
var $qf = $("<input>",{
type : "text",
class : "qfStyle",
id : "text"+this.id,
name : "text"+this.id,
disabled: true
});$td = $("<td>");$td.append($qf);$tr.append($td);
var $qnty = $("<input>",{
type : "text",
class : "textStyle",
id : "qnty"+this.id,
name : "qnty"+this.id,
value : "--",
disabled: true,
readonly: true
});$td = $("<td>");$td.append($qnty);$tr.append($td);
var $unit = $("<input>",{
type : "text",
class : "textStyle",
id : "unit"+this.id,
name : "unit"+this.id,
value : "--",
disabled: true,
readonly: true
});$td = $("<td>");$td.append($unit);$tr.append($td);
var $price = $("<input>",{
type : "text",
class : "textStyle rightAligned",
id : "price"+this.id,
name : "price"+this.id,
value : "0.00",
disabled: true,
readonly: true
});$td = $("<td>");$td.append($price);$tr.append($td);
$("#listDB").append($tr);
});
});
}
},"json");
$("#listDB").fadeIn(500);
});
$（“#类别_选择器”）。更改（功能（事件）{
如果（$search！==null）
{
$search.remove（）；
$search=null；
}
$（“#listDB”）.css（'display'，'none'）；
$（“#listDB”）.find（“.catHead”）.remove（）；
$（“#listDB”）.find（“.data”）.remove（）；
if（$（this.val（）=“搜索”）
如果（！$（“#搜索对话框”）。是（“：可见”））
{
$（“#showSearch”）.trigger（'click'）；
返回；
}
$（“#操作”）.val（'getList'）；
变量数据=$（“#列表：输入”）.serialize（）；
$.post（$（“#list”）.attr（'action'）、数据、函数（json）
{
if（json.listArr.length>0）
{
$.each（json.listArr，function（）{
变量$tr=$（''{
班级：“猫头”，
});
变量$td=$（''{
$("#listDB").on("change", ".itemCbox", function(event) {
$("#cancelInsert").click(function(event){
$("input:checked[name='selected[]']").each(function () {
$(this).prop('checked', false);
});
});
$("#listDB").on("click", ".itemCbox", function(event) {
event.preventDefault();
alert("event is firing");
console.log("I m firing");
}
$(document).on("click", ".itemCbox", function(event) {
alert("event is firing");
}
$(".cancelButton").click(function (e){
$("input:checkbox[name='selected[]']").prop('checked', false);
$(".closeDialog").click();
});
<input type="button" id="cancelInsert" class="dialogButton" name="cancelInsert" value="Cancel" />
$("#cancelInsert").click(function(event){
$("input:checked[name='selected[]']").each(function () {
$(this).trigger('click');
$(".closeDialog").trigger('click');
});
});