我使用文本框存储某些值，但仅在单击相应的复选框时才使用。否则，文本框将被禁用。文本框和复选框是动态生成的。所以，我使用了on方法。文本框为$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');
});
});
这种方法有效 - 未选中复选框，但未禁用关联的文本框。为什么是这样？相应的事件处理程序$("#listDB").on("click", ".itemCbox", function(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);之后的所有内容都没有执行。这可能是个问题。有什么想法吗？我还获得了与cancelInsert按钮关联的以下代码：
$(".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>
生成动态生成的复选框和文本框的代码是：
$("#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);
});
答案 0 :(得分：2)
因为您的复选框字段是动态创建的，所以您必须尝试类似
的内容$(document).on("click", ".itemCbox", function(event) {
alert("event is firing");
}
答案 1 :(得分：0)
$("#listDB").on("click", ".itemCbox", function(event) {
替换＆＃39;点击＆＃39;有变化的事件＆＃39;事件
$("#listDB").on("change", ".itemCbox", function(event) {
并删除＆＃34; $（this）.trigger（＆＃39;点击＆＃39;）;＆＃34;线
$("#cancelInsert").click(function(event){
$("input:checked[name='selected[]']").each(function () {
$(this).prop('checked', false);
});
});
答案 2 :(得分：0)
快速提示。使用以下代码检查事件是否实际触发。并提供html代码以查看错误。
$("#listDB").on("click", ".itemCbox", function(event) {
event.preventDefault();
alert("event is firing");
console.log("I m firing");
}
答案 3 :(得分：0)
自己解决了。
问题在于代码：
$(".cancelButton").click(function (e){
$("input:checkbox[name='selected[]']").prop('checked', false);
$(".closeDialog").click();
});
cancelButton类点击的代码在cancelInsert ID点击事件的代码之前触发。这意味着在cancelInsert按钮有机会取消选择并触发复选框的click事件之前，它已被类的click事件取消选中。因此，选择器$("input:checked[name='selected[]']")此时基本上是空的。为了使它工作，我将HTML代码更改为：
<input type="button" id="cancelInsert" class="dialogButton" name="cancelInsert" value="Cancel" />
注意缺少cancelButton类。接下来，cancelInsert的点击事件的代码也需要更改为：
$("#cancelInsert").click(function(event){
$("input:checked[name='selected[]']").each(function () {
$(this).trigger('click');
$(".closeDialog").trigger('click');
});
});
只需触发已单击的复选框的单击事件，同时取消选择它们，同时在复选框的事件处理程序中执行代码。最后，触发closeDialog类的单击事件以关闭对话框。这就是全部。
感谢大家的答案和时间。