个人中心
gpt4 book ai didi

jquery - 单击删除元素时按钮没有响应

转载 作者：行者123 更新时间：2023-12-01 04:53:43 26 4
gpt4 key购买 nike

我通常是一名后端开发人员，在前端方面做的不多，但我有一个负责端到端的大型项目。因此，我尝试使用 Twitter Bootstrap 和 jQuery，但在尝试删除之前使用 jQuery 创建的列表项时发现自己陷入困境。我觉得我错过了一些明显的东西，但无法弄清楚它是什么。

这是代码，“从订单中删除”部分在单击按钮时不会执行任何操作 - 似乎什么也没有发生:

编辑:无法让 Jsfiddle 正常运行，因此我在此处添加了 HTML 和代码。所有内容要么是内联的(因为这是一个测试文件)，要么是通过 CDN 调用。

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>

            </title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="description" content="">
            <meta name="author" content="">
            <!-- Le styles -->
            <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
            <!--[if lt IE 9]>
            <script src="js/html5shiv.js"></script>
            <![endif]-->
            <!-- Fav and touch icons -->
            <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
            <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
            <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
            <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
            <link rel="shortcut icon" href="ico/favicon.png">
            <link rel="stylesheet" href="js/prettyCheckable/prettyCheckable.css">
            <link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
            <link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.5.0/jquery.selectBoxIt.css" />

            <script src="js/prettyCheckable/prettyCheckable.js"></script>
            <script>
                    $().ready(function(){

                      $('input.fancyCheckbox').prettyCheckable();

                      //Calls the selectBoxIt method on your HTML select box.
                      $("select").selectBoxIt({
                            theme: "bootstrap",
                            showFirstOption: false
                        });

                       $(".poptip").popover({ trigger: "hover" });
                       $(".inputpopover").popover({ trigger: "focus" });

                       $(".tip").tooltip();


                        // Add To Order Button Click Code
                        $('#idsp-test').keyup(function () {
                            // console.log(this.value);
                            if(parseInt(this.value) > 0) {
                                $('#btn-idsp-add').show();
                            }
                            else {
                                $('#btn-idsp-add').hide();
                            }
                        });

                        $("#btn-idsp-add").on('click', function(){
                            $("#addons_list").append('<li id="idsp-addon-list-item"><i class="icon-ok"></i> ' + $('#idsp-test').val() + ' IDSP <button class="btn btn-mini btn-danger" id="btn-idsp-remove" type="button">Remove From Order</button></li>');
                            // Hide Button After Adding to Sidebar
                            $('#btn-idsp-add').fadeOut('slow');
                        });

                        // REMOVE FROM ORDER BUTTONS
                        $('#btn-idsp-remove').on('click',function(){
                            $('#idsp-test').val('0');
                            $('#idsp-addon-list-item').remove();
                        });

                    });
            </script>
            <style type="text/css">
                .selectboxit-container .selectboxit-options {
                    /* Set's the drop down options width to the same width as the drop down button */
                    width: 210px;
                    /* Set's the max-height property to only show a subset of the drop down items.
                                           If you do not set a max-height property, SelectBoxIt will dynamically
                                           position the dropdown (when opened) to make sure the drop down items are not
                                           displayed outside of the current window viewport.
                                        */
                    max-height: 240px;
                }

                #btn-idsp-add, #btn-county-crim-add {
                    display: none;
                }
            </style>
        </head>
        <body>
            <div class="container-fluid">
                <h1>Package and Addon Selection</h1>
                <div class="container-fluid">
                    <div class="row-fluid">
                        <div class="span4">
                            <form action="index.cfm" method="post" enctype="multipart/form-data">
                                <legend>Package Selection</legend>
                                <div class="control-group">
                                    <div class="controls">
                                        <select id="package_select" name="package_select" class="package_selection">
                                            <option>Basic Packages</option>
                                            <option data-selectedtext = "Standard SmartPak Selected" data-content="Standard SmartPak" value="standard">Standard SmartPak</option>
                                            <option data-selectedtext = "Advanced SmartPak Selected" data-content="Advanced SmartPak" value="advanced">Advanced SmartPak</option>
                                        </select>
                                    </div>
                                <div class="alert alert-success" style="margin-top: 6px; box-shadow: 0 0 2px">
                                <h5>This Package Includes:</h5>
                                    <ul class="unstyled">
                                        <li><i class="icon-ok"></i> One</li>
                                        <li><i class="icon-ok"></i> Two</li>
                                        <li><i class="icon-ok"></i> Three</li>
                                    </ul>
                                </div>
                                <hr>
                                <div id="addons_list_box" class="alert alert-info" style="box-shadow: 0 0 2px">
                                <h5>Additional Addon Items:</h5>
                                    <ul class="unstyled" id="addons_list"></ul>
                                </div>
                                </div>
                        </div>
                        <div class="span8">
                            <fieldset>
                            <!-- Form Name -->
                            <legend>Order Add Ons</legend>
                            <!-- Multiple Checkboxes -->
                            <div class="control-group">
                                <div class="controls controls-row">
                                    <div class="input-wrapper form-inline">
                                        <label for="idsp-test">IDSP
                                        <input type="text" class="mini inline inputpopover" title="Additional IDSPs" data-content="Enter a number from 1 to 10 to add to your order.  Set to zero and click the button to remove or change." data-placement="top" id="idsp-test" name="idsp-test" placeholder="Add a Quantity from 1 to 10." value="" autocomplete="off" />
                                        <button class="btn btn-success" type="button" id="btn-idsp-add"><i class="icon-plus icon-white"></i> Add/Update Order</button>
                                        </label>
                                    </div>
                                </div>
                                <div class="controls controls-row">
                                    <div class="input-wrapper form-inline">
                                        <label for="county-crim-test">County Criminal Search
                                        <input type="text" class="mini inline inputpopover" title="Additional County Criminal Searches" data-content="Enter a number from 1 to 10 to add to your order.  Set to zero and click the button to remove or change." data-placement="top" id="county-crim-test" name="county-crim-test" placeholder="Add a Quantity from 1 to 10." value="" autocomplete="off" />
                                        <button class="btn btn-success" type="button" id="btn-county-crim-add"><i class="icon-plus icon-white"></i> Add/Update Order</button>
                                        </label>
                                    </div>
                                </div>
                                <!-- Button -->
                                <div class="control-group">
                                    <label class="control-label"></label>
                                    <div class="controls">
                                        <input name="submit" type="submit" class="btn btn-primary" id="submit" title="Submit the Form" value="Place My Order" data-toggle="tooltip" data-content="Submit The Form" />
                                    </div>
                                </div>
                            </div>
                            </fieldset>
                    </form>
                </div>
        </div>
    </div>
    </div>
    <!-- /container -->
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.5.0/jquery.selectBoxIt.min.js"></script>
    <script src="js/prettyCheckable/prettyCheckable.js"></script>
    </body>
    </html>

有人可以告诉我我做错了什么吗？

谢谢!

最佳答案

尽管它有点违背了“.on”的要点，但请尝试将点击事件更改为:

// REMOVE FROM ORDER BUTTONS
$(document).on('click', '#btn-idsp-remove', function(){
    $('#idsp-test').val('0');
    $('ul').find('#idsp-addon-list-item').remove();  //assumes you are using "ul" for your list and not "ol"
});

还有一个jsFiddle随它去。

关于jquery - 单击删除元素时按钮没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16661516/

26 4 0
文章推荐： jQuery 从数组中的每个值创建变量名称
文章推荐： jquery - 在 iframe 中将类切换为 HTML
文章推荐： jquery - jQuery ajax GET 请求可以传递的数据限制是多少
文章推荐： java - 使用 JavaMail MessageIDTerm 获取消息的所有标签名称
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com