jQuery - Show and hide button

Question

I have written a script that shows a submit button when clicking inside an input area. And when clicking outside the input, the button should be hidden. There are several areas and buttons, therefore I have assigned a unique ID to every button and area.

The problem is: When I click the area, the button shows. But when clicking outside, nothing happens. The script works if I only have one button and area, but when assigning IDs, it stops working...

$(".textarea").click(function(e) {
    var cid = $(this).attr('rel');

    $("#submit" + cid).show();
    e.stopPropagation();
});

$(document).click(function() {
    $("#submit" + cid).hide();
});

Solution 1

$(".textarea").click(function(e) {
    var cid = $(this).attr('rel');

    $("#submit" + cid).show();
    e.stopPropagation();
});

$(document).click(function() {
    //add logic to hide all submit buttons by assigning common class to all
});

Solution 2

The variable cid is declared in the anonymous text area click handler. So, when the other function is called as a result of a click, it does not have a value.

Change you hide function to something independent of cid like this

$(document).click(function() {
    $("button[id*=submit]").hide();
});

The id*=submit section will look for all buttons that have submit in the id and hide them. This will circumvent the need to track cid. If you have other buttons with submit in the id that you do not want to hide, then selecting based on a class or changing the id format will be required.

Comments

[K D]

please mark it as answer if you got the solution :) Happy coding