javascript - 复选框的事件处理程序未被触发-6ren

javascript - 复选框的事件处理程序未被触发

转载作者：行者123 更新时间：2023-12-02 13:46:02

我使用文本框来存储某些值，但前提是单击相应的复选框。否则文本框将被禁用。文本框和复选框是动态生成的。因此，我使用了 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="&larr; 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);
});

最佳答案

因为您的复选框字段是动态创建的，所以您必须尝试类似的操作

$(document).on("click", ".itemCbox", function(event) {
  alert("event is firing");
}

关于javascript - 复选框的事件处理程序未被触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41390456/

文章推荐： ssh - 从 Jenkins 调用 SSH 命令

文章推荐： javascript - NativeScript 游览库

jquery - 触发 ('click' ) 与触发 ('click' )[0]
这个问题已经有答案了: jQuery trigger click vs click ()? (3 个回答) 已关闭 5 年前。我无法区分 trigger('click')与 trigger('cli
asp.net - IHttpModule.BeginRequest 触发 2X，Application_BeginRequest 触发 1X
我正在运行 VS 2008 和 .NET 3.5 SP1。我想在 HttpModule 中实现命中跟踪在我的 ASP.NET 应用程序中。很简单，我想。然而，BeginRequest我的事件 Htt
mysql - 触发
这是一段代码，我收到以下错误 #1064 - You have an error in your SQL syntax; check the manual that corresponds to yo
javascript - 触发 'dummy'鼠标滚轮事件
有没有办法用任意增量触发滚轮事件。就像 jQuery 对“点击”所做的那样: $('#selector').trigger('click'); 我需要类似的东西，只需一个滚轮即可: $('#selec
sql - SQL-触发 “not in”
我正在尝试在配音数据库中触发时间。我想检查一下在不出现角色的电影配音中不能对角色进行配音。这是PDM: 和CDM 我是SQL的初学者，但我知道表“DUBBES”中应该有一些触发器。我试图做这样的事情，
jquery - 触发 .on() 创建的事件
这个问题已经有答案了: jquery programmatically click on new dom element (3 个回答) 已关闭 6 年前。我有一个 jQuery 事件定义如下: $
jquery - 子菜单点击事件不起作用/触发
主菜单的点击代码适用于类更改，但不适用于子菜单...当单击食物或鞋子等子菜单项时，它不会触发警报命令...事实上，悬停非常适合子菜单但不是活跃的 HTML
jquery - 触发()后未给出鼠标位置
问题非常简单: $('#btn1').click(function(event){ alert( "pageX: " + event.pageX + "\npa
java - 触发@Scheduled方法
我使用 Spring 的调度程序 (@EnableScheduling) 并具有以下 @Scheduled 方法，该方法每分钟调用一次: @Component public class Schedul
mysql - 触发，不插入
错误 SQL 查询:文档 CREATE TRIGGER `triggers_div` AFTER INSERT ON `produits` FOR EACH ROW BEGIN INSERT INTO
MySQL 触发 IF 条件
我想在插入另一个表时填充表中的一些列值，并为特定列设置条件。我使用触发器: CREATE TRIGGER inserttrigger AFTER INSERT ON table1 FOR EACH R
MySQL 触发 If 语句并与查询进行比较
我可以在 5.6 MySQL 环境中使用一些关于触发器的指导。我想创建一个触发器，如果发现具有相同速度的电脑的价格较低，则该触发器会停止更新。架构是产品(制造商、型号、类型)PC(型号、速度、内
postgresql - 触发，更新字段更新时间戳
背景:我们有一个 completed_flag，默认为 0，当有人完成调查时更新为 1。我想记录这次更新发生的时间戳在编写了这个触发器/函数以在标志从 0 触发到 1 时更新时间戳后，我怀疑我这样做
mysql - 多行插入时触发器不工作/触发
数据库中有两个表 KistStatus和 LastKistStatus .后者将保存 KistStatus 的所有“最新”值。 . KistStatus有大约 174.000 条记录，LastKist
iPhone - 触发 APNS
我正在开发一个使用 APNS 的 iPhone 应用程序。我很清楚实现 APNS、创 build 备 token 的过程，等等等等……我不知道如何通过 Web 服务从提供商端触发和启动 APNS。任何
页面加载时 JavaScript 触发
我有这个 javascript，当数量更改时会触发 update_cart... jQuery('div.woocommerce').on('change', '.qty', function
javascript - 单击事件未使用 ON 触发？
当我单击任何按钮时，click 事件不会被触发。艰难的是，我使用 $("div").on("click", "button", function () { 让它工作，但我想看到它使用 .class 工
Android:触发 onCreateOptionsMenu
如何在我的代码中触发 Android onCreateOptionsMenu 函数，即无需用户单击手机上的选项菜单按钮？最佳答案 Activity.openOptionsMenu(); 就可以了关
Android - 触发 adjustResize
我将表单包装在中然后我设置 list android:windowSoftInputMode="adjustResize" (默认 react native )。现在，当我用手指触摸事件手动聚焦一
Android TextWatcher 触发
我有一个 Android 编程问题。使用下面的代码我想验证一个字符串匹配。它验证正常，但 LogCat 显示 TextWatcher 方法在每次击键时触发两次，我不明白为什么。我希望每次击键只触发一次

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 复选框的事件处理程序未被触发

编辑

代码转储