Javascript 第二次单击按钮时未调用按钮单击功能

我有一个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>

该功能第一次起作用。单击“.btnDidNotEat”，另一个按钮“#btnRemovedNoteat”将显示。单击“#btnRemoveDidNotEat”，它将根据需要隐藏

但是，第二次单击“.btnDidNotEat”时，会显示另一个按钮“#btnRemoveDidNotEat”。但未调用“#btnRemoveDidNotEat”的按钮单击函数

我曾尝试对style=“display:none；”执行相同的操作，但这也给了我同样的问题。我也尝试过使用切换

我错过什么了吗

---

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

我不确定是否正确理解了你的问题，但以下是我得到的答案

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

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

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


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

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

---

您可以使用

toggle（）

函数，而不是添加和删除类。

我不确定我是否正确理解您的问题，但您的AJAX响应似乎有部分查看结果。如果您试图访问AJAX部分视图的按钮单击事件，它将不会命中单击事件，因为它不会附加到DOM。因此，您不应该使用代码，而应该使用如下内容

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

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

}

---

使用了与您在我的代码中使用的相同的小提琴代码，#btnRemoveDidNotEat在我第一次单击时被隐藏。btnDidNotEat并且无论单击多少次都不会再次显示。btnDidNotEat被单击。我也没有看到任何控制台错误。您使用的是什么版本的jQuery？在我的示例中，我使用了2.2.4，这可能是您需要在ajax调用中显示代码的问题-最好的猜测是您需要更新DOM并替换其中一些元素，在这种情况下，您需要使用@StephenMuecke是的，我认为这就是问题所在。谢谢

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

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

}