We Keep Coding

Button click function not being called the second time of button click

I have an MVC application and one of the views contains a button with a condition.
<i class="fa fa-sticky-note-o"></i>Did Not Eat
<button type="button" id="btnRemoveDidNotEat" class="btn btnRemoveDidNotEat">Remove Did Not Eat</button>
On click of btnRemoveDidNotEat,btnRemoveDidNotEat is hidden.
If btnDidNotEat is clicked,btnRemoveDidNotEat is shown.
Here is my JS code.
$('.btnDidNotEat').on('click', function () {
$.ajax({
}).done(function (partialViewResult) {
$('#btnRemoveDidNotEat').show();
});
});
$('#btnRemoveDidNotEat').on('click', function () {
$.ajax({
}).done(function (partialViewResult) {
$('#btnRemoveDidNotEat').hide();
});
});
The functionality works for the first time. On click of ".btnDidNotEat", the other button '#btnRemoveDidNotEat' is shown. On click of '#btnRemoveDidNotEat', it is hidden as required.
However the second time,On click of ".btnDidNotEat", the other button '#btnRemoveDidNotEat' is shown. But the button click function for '#btnRemoveDidNotEat' is not called.
I have tried doing the same with style="display:none;", but that gives me the same issue. I have also tried using toggle.
Am I missing something?
EDIT : Simplified the question to make it more clear.

I am not sure I understand your question right, but it looks like your AJAX response seems to have a partial view result. If you are trying to access the button click event of that partial view of AJAX, it will not hit the click event because it will not be attached to the DOM. So instead of your code, you should use something like this.
$("body").on("click", ".btnRemoveDidNotEat", function() {
$.ajax({
}).done(function (partialViewResult) {
$('#btnRemoveDidNotEat').hide();
});
}

I'm not sure if I understood your question correctly, but here is what I got fiddle
Here is some improvements of your script:
$('.btnDidNotEat').click(function () {
$.ajax({
}).done(function (partialViewResult) {
$('#btnRemoveDidNotEat').toggle();
});
});
$('#btnRemoveDidNotEat').click(function () {
$.ajax({
}).done(function (partialViewResult) {
$('#btnRemoveDidNotEat').toggle();
});
});
You can use toggle() function instead of adding and deleting class.

how do i hide/update/show multiple instances with the same ID with jquery?

I have a jQuery script where somebody can click a button to add this item to their favorites. Now, the problem is I want to add this button several times on the page - the exact same button with the same code. When I click one of the buttons, the first one gets updated but the others don't. Is there any way to update ALL the matching IDs? In other words, run this action for all matching cases on the page, except for the first one?
The code is like this:
$(document).on('click','#add-to-list',function (e) {
e.preventDefault();
var id = $(this).data("id");
$.ajax({
url: "http://xxx.xxx.xxx.xxx/add_to_list?id=" + id,
type: "GET",
dataType: 'json',
success: function(json) {
if(json.valid == 1) {
$("#list-button").hide();
$("#list-response").html('Added to Favorites');
$("#list-response").show();
}
},
timeout: 10000
});
});
And then on the page obviously I have multiple instances of
<div id="list-button">
(button here)
</div>
<div id="list-response">
(initially hidden)
</div>

in jquery id will work only on single button and class will work on every button so for this action you have to use class instead of id please follow this link --
What's the difference between class and id in jQuery?

ID of an element must be unique, the ID selector will fetch only the first element with the given ID.
In your case you can use classes instead of ID like then use traversal methods to target the proper element to show/hide
$(document).on('click', '.add-to-list', function (e) {
e.preventDefault();
var $this = $(this);
var id = $this.data("id");
$.ajax({
url: "http://xxx.xxx.xxx.xxx/add_to_list?id=" + id,
type: "GET",
dataType: 'json',
success: function (json) {
if (json.valid == 1) {
$this.closest('.list-button').hide().next().html('Added to Favorites').show();
}
},
timeout: 10000
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="list-button">(button here)</div>
<div class="list-response">(initially hidden)</div>

jQuery .bind('show') not working appropriately when element is shown via jQuery

I have a snippet in my project similar to the one seen below:
$('#field').change(function() {
var thisCondition = $(this).val();
if(thisCondition) {
$('#this_container').fadeIn();
}
});
The above snippet is working. When thisCondition evaluates to true, the container does fade in. However, I also have the snippet below that is not functioning as expected. It binds to show so that when the container fades in an event will be triggered:
$('#this_container').bind('show', function() {
$.ajax({
...
});
});
Shouldn't the snippet above react to line 5 in the change event handler? Why is the bind method not triggering?

Confirmed that show is not a valid nor jQuery-triggered event.
But you can trigger it yourself!
Try something like this :
$('#this_container').fadeIn("slow", function() {
$(this).trigger("show");
});

The show is not a valid event, neither is triggered by jQuery. You need to construct your script in a different way altogether:
$('#field').change(function() {
var thisCondition = $(this).val();
if(thisCondition) {
$.ajax({
success: function () {
$('#this_container').fadeIn();
}
});
}
});
So, you can try to bring the AJAX content, and upon a successful request, you can show the container.

try to use :
$('#this_container').fadeIn( "slow", function() {
// Animation complete
$.ajax({
...
});
});

How to add two different ID with Ajax

I am using an Ajax function for show the auto suggestions for search field. But, I've to search field on the same page. So, when I am trying to use this then one is work and another one isn't. It's because Both of those are using couple of same ID and Class. I style them with CSS for different width and height.
Can anyone please help me know how may I add one more ID and Class on the below code for each field?
$(document).ready(function() {
$("#email").keyup(function() {
var searchid = $(this).val();
var dataString = 'type=' + searchid;
if (searchid != ' ') {
$.ajax({
type: "POST",
url: "type_process.php",
data: dataString,
cache: false,
success: function(html) {
$("#result").html(html).show();
}
});
}
return false;
});
$(document).click(function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("get_types")) {
jQuery("#result").fadeOut();
}
});
$('#email').click(function(){
jQuery("#result").fadeIn();
});
});

When you select 2 element (or more) you can refer to a single one by specifing the element index.
$('.item').eq(0); // return the first element in a collection with class '.item'
or
$('.item').eq(1); // return second element in a collection with class '.item'
BTW, you should avoid having elements with the same ID in the DOM

If you want to select lots of differents elements, use a Class tag instead.
Mark all your elements with the same class, like: class="mySelectorClass" and then, use a jquery selector:
$(".mySelectorClass").each(function(index,value){
// ... your code for each element goes here!
});
https://api.jquery.com/jQuery.each/

JQuery click from multiple anchor for ajax call

I have multiple anchor tag generated by php from database like this
Now I got JQuery script
$(document).ready(function(){
$("#reply_doc").click(function () {
var a = $(this).data("doc_value");
if (a != "") {
$.ajax({
type: "POST",
url: "ajax_check/",
data: "doc_reply=" + a,
success: function (b) {
alert(a+' ok. '+b)
}
});
}
});
});
This is only applying for the first anchor tag.
How can I do this for each anchor tag when that particular is clicked only that anchor will be affected and that particular value will be send with ajax.
Any help will be appreciated. thanks in advance.

The id attribute is an identifier. As the name might suggest, that means it has to be unique so that it can identify a single element. In order to recognise multiple elements, you'll need to use a class instead:
$(".reply_doc").click(...);

Change the id to a class, and change your selector to ".reply_doc".
Your html is currently invalid because the id attribute should be unique. Although the browser doesn't jump up and down complaining when you break this rule, when you try to select an element by id it only finds the first (or, in some browsers, the last).
If, hypothetically, you have no control over the html structure you could instead select all anchor elements with the data-doc_value attribute:
$("a[data-doc_value]")...

Elements cannot have same id so bind event on same class .
a href="#" class="option" id="reply_doc" data-doc_value="1"></a>
JQuery script
$(document).ready(function(){
$(".option").click(function () {
var a = $(this).data("doc_value");
if (a != "") {
$.ajax({
type: "POST",
url: "ajax_check/",
data: "doc_reply=" + a,
success: function (b) {
alert(a+' ok. '+b)
}
});
}
});
});

Edited again DEMO
111<br>
222<br>
333<br>
$(document).ready(function(){
$(".reply_doc").click(function () {
var a = $("a.reply_doc").attr("data-doc_value"); //<-- Add this
if (a != "") {
$.ajax({
type: "POST",
url: "ajax_check/",
data: "doc_reply=" + a,
success: function (b) {
alert(a+' ok. '+b)
}
});
}
});
});
This way each time "a" will have unique value contained in data-doc_value on click