Question

我有一个MVC应用程序，其中一个视图包含一个带条件的按钮。

<a href="#DidNotEatModal" role="button" class="btn btnDidNotEat" data-toggle="modal"><i class="fa fa-sticky-note-o"></i>Did Not Eat</a>   

<button type="button" id="btnRemoveDidNotEat" class="btn btnRemoveDidNotEat">Remove Did Not Eat</button>

点击btnRemoveDidNotEat后，隐藏btnRemoveDidNotEat。
如果单击btnDidNotEat，则显示btnRemoveDidNotEat。

这是我的JS代码。

    $('.btnDidNotEat').on('click', function () {   
        $.ajax({

        }).done(function (partialViewResult) {        
            $('#btnRemoveDidNotEat').show();
        });
    });


    $('#btnRemoveDidNotEat').on('click', function () {   
        $.ajax({     

        }).done(function (partialViewResult) {                       
            $('#btnRemoveDidNotEat').hide();
        });
    });

该功能首次使用。单击“.btnDidNotEat”，将显示另一个按钮“#btnRemoveDidNotEat”。点击'#btnRemoveDidNotEat'，它会根据需要隐藏。

然而第二次，点击“.btnDidNotEat”，会显示另一个按钮'#btnRemoveDidNotEat'。但是没有调用'#btnRemoveDidNotEat'的按钮点击功能。

我尝试过使用style =“display：none;”，但这给了我同样的问题。我也试过使用切换。

我错过了什么吗？

编辑：简化问题以使其更清晰。

Answer 1

我不确定我是否理解你的问题，但看起来你的AJAX响应似乎有部分查看结果。如果您尝试访问AJAX部分视图的按钮单击事件，它将不会点击click事件，因为它不会附加到DOM。所以你应该使用类似的东西代替你的代码。

$("body").on("click", ".btnRemoveDidNotEat", function() {
    $.ajax({     

    }).done(function (partialViewResult) {                       
        $('#btnRemoveDidNotEat').hide();
    });

}

Answer 2

我不确定我是否正确理解了您的问题，但这是我得到的fiddle

以下是您的脚本的一些改进：

toggle()

您可以使用SELECT FOR UPDATE功能，而不是添加和删除类。

按钮点击功能未被第二次点击按钮调用

2 个答案: