Question

我尝试添加和删除类，然后单击事件以执行ajax调用。后来成功找回旧班。就像我改变输入字段的状态启用一样，改变编辑按钮的文本同时保存和添加类。当我点击相同的按钮时，它必须将输入字段中的修改值发送到api并恢复回原始保存按钮。当我单击编辑按钮时，这是第一次发生。保存后如果单击编辑按钮，则更改状态以保存并再次编辑。需要帮助。

           $.each(data, function(key, value) {
            if (parseInt(cat_id[i].innerHTML) == value.category.id) {
                base_rate[i].value = value.base_rate;
                ast[i].innerHTML = value.service_type.name;
                airportEditId[i].setAttribute("id",value.id);
                newEvent = value.id;
                airportEditId[i].classList.add("fireevent"+value.id);
                j = true;
                base_rate[i].setAttribute("disabled",true);
                      $('.fireevent'+value.id).on('click',function(){
                        $(this).attr("id",value.id);
                        $(this).parents("tr").find("input").prop('disabled',false);
                        $(this).text("save");
                        $(this).removeClass().addClass("smokeevent"+value.id).addClass("btn btn-primary");
                        console.log(this);


                      $('.smokeevent'+value.id).on('click',function(){
                           var airport = {
                              "updated_by":{{user.id}},
                              "city":parseInt($('#city_list option:selected').val()),
                              "service_type":parseInt($('#select_service1 option:selected').val()),
                              "base_rate":parseInt($(this).parents("tr").find("input").val()),
                              "vehicle_varient":[1,2]
                           };

                           console.log(airport);
                         $.ajax({
                            url: '/rapido/api/update_airportratecard/'+value.id+'/',
                            method: 'PUT',
                            headers:{'X-CSRFToken':'{{ csrf_token }}'},                  
                            contentType : 'application/json',
                            context:this,
                            data: JSON.stringify(airport),
                            success:function(res){
                              console.log(this);
                              $(this).text("Edit");
                              $(this).parents("tr").find("input").prop('disabled',true);
                              $(this).removeClass().addClass("btn btn-success");
                            }
                         });
                      });
                    });

Answer 1

试试这个，在一个循环中，为同一次点击附加了多个事件。放开早先的事件并再次附上。 $（＆＃39; .airportdata＆＃39;）。关闭（＆＃39;点击＆＃39;）。（＆＃39;点击＆＃39;，...

Answer 2

你是 通过循环中的类选择器 将事件绑定到元素。

在循环结束时，您将为属于该类的所有元素分配多个事件处理程序。因此，一次点击触发器将调用所有这些事件处理程序。

而是使用您自己的airportEditId[i]绑定事件而不是

$( airportEditId[i] ).on('click',function(){

注意：按此行判断

$(".airportdata").removeClass().addClass("airport_editid").addClass("btn btn-success");

airport_editid和airportdata是相同元素的类。因此，您可以用$( airportEditId[i] ).on('click',function(){

替换它们

修改

另一种方法可能是将这两个click事件处理程序拉出循环并单独绑定它们

$.each(data, function(key, value) { if (parseInt(cat_id[i].innerHTML) == value.category.id) { base_rate[i].value = value.base_rate; ast[i].innerHTML = value.service_type.name; airportEditId[i].setAttribute("id", value.id); newEvent = value.id; j = true; base_rate[i].setAttribute("disabled", true); } }); $(".airport_editid").on('click', function() { //notice that this line is outside $(this).parents("tr").find("input").prop('disabled', false); $(this).text("save"); $(this).removeClass().addClass("airportdata").addClass("btn btn-primary"); $(this).on('click', function() { //notice that this line is using `this` instead of selector var airport = { "updated_by": { { user.id } }, "city": parseInt($('#city_list option:selected').val()), "service_type": parseInt($('#select_service1 option:selected').val()), "base_rate": parseInt($(this).parents("tr").find("input").val()), "vehicle_varient": [1, 2] }; $.ajax({ url: api, method: 'PUT', headers: { 'X-CSRFToken': '{{ csrf_token }}' }, contentType: 'application/json', data: JSON.stringify(airport), success: function(res) { $(".airportdata").parents("tr").find("input").prop('disabled', true); $(".airportdata").text("Edit"); $(".airportdata").removeClass().addClass("airport_editid").addClass("btn btn-success"); } }); }); });

点击事件导致第一次点击后的事件链

2 个答案: