Question

我正在使用django和jQuery构建一个Web应用程序，并且在其中一个页面上$（document）.com（'click'...事件非常间歇性地触发。我在结帐队列中有一个项目列表，删除每个项目的选项。如果我从列表的顶部到底部，点击事件大多会触发（但并非总是如此）。如果我从底部开始，有时它们会触发，有时不会触发。有些需要2次点击，有些人在注册前需要点击次数超过6次。

代码。这是从模板生成的html django：

<div class="container">
    <table id="cart" class="table table-hover table-condensed">
                    <thead>
                        <tr>
                            <th style="width:70%">Product</th>
                            <th style="width:10%" class="text-center">Seller</th>
                            <th style="width:10%">Price</th>
                            <th style="width:10%"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr  id="product-3653672818">
                            <td data-th="Product">
                                <div class="row">
                                    <div class="col-sm-3 hidden-xs"><img src="xyz.com/img.jpg" style="width: 121px; height: 88px;"></div>
                                    <div class="col-sm-9">
                                        <h4 class="nomargin">Product Name</h4>
                                        <p>Product Description</p>
                                    </div>
                                </div>
                            </td>
                            <td data-th="Seller" class="text-center">ONLINE</td>
                            <td data-th="Price">3.00</td>
                            <td class="actions" data-th="">
                                <button class="btn btn-danger btn-sm"><i class="fa fa-trash-o DeleteItem" id="3653672818"></i></button>
                            </td>
                        </tr>

                        <tr  id="product-3653492642">
                            <td data-th="Product">
                                <div class="row">
                                    <div class="col-sm-3 hidden-xs"><img src="xyz.com/img.jpg" style="width: 121px; height: 88px;"></div>
                                    <div class="col-sm-9">
                                        <h4 class="nomargin">Product #2 Title</h4>
                                        <p>Product #2 Description</p>
                                    </div>
                                </div>
                            </td>
                            <td data-th="Seller" class="text-center">ONLINE</td>
                            <td data-th="Price">4.00</td>
                            <td class="actions" data-th="">
                                <button class="btn btn-danger btn-sm"><i class="fa fa-trash-o DeleteItem" id="3653492642"></i></button>
                            </td>
                        </tr>
</div>

这是我的jQuery：

$(document).on('click','.DeleteItem',function(event){
    event.preventDefault();
    var thisID = $(this).attr("id");
    var data = { Action: "delete", itemid: thisID};

    var pr = "#product-"+thisID;
    $(pr).fadeOut(500, function() { $(pr).remove(); });

    $.ajax({
        url: "/cart/", 
        type: "POST", 
        data: data, 
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
        },

        // handle a successful response
        success: function (json) {
            if (json.result == "OK") {
                console.log(json); 
                console.log("success"); 
            } else {
                console.log(json); 
                console.log("failure"); 
            }
        },

        // handle a non-successful response
        error: function (xhr, errmsg, err) {
            console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
        }
    });
});

Answer 1

好的，以防其他人遇到这种情况，我最终弄清楚这里发生了什么。

我在模板中定义按钮的方式是罪魁祸首：

<button class="btn btn-danger btn-sm"><i class="fa fa-trash-o DeleteItem" id="3653672818"></i></button>

我的jQuery正在点击$（文档）.on（＆＃39;点击＆＃39;，＆＃39; .DeleteItem＆＃39;这是一个在＆＃34; i＆＃34; html元素中定义的类而不是主按钮类。＆＃34; fa-trash-o＆＃34;类是一个小垃圾桶图标，只占按钮区域的1/3左右。

所以会发生什么事情，如果你点击按钮中间的砰砰声（直接在垃圾桶上），一切都会奏效。但如果你点击按钮上的其他地方，则没有任何反应。即。有时候它有效，有时它没有。

解决方法是移动＆＃34; DeleteItem＆＃34;按钮的类定义：

<button class="btn btn-danger btn-sm DeleteItem" id="3653672818"><i class="fa fa-trash-o" ></i></button>

jQuery间歇性.on（'click'）

1 个答案: