CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SouravMoitra
SouravMoitra

Reputation: 63

jquery div not respnding to other javascript/jquery methods

I have added one div inside a div using $(select).append() method but the I want it to close it on click on image so i hav added image and an another $(select).button().click( { $(select).hide() }); but on clicking the close image nothing happens....

$(document).ready(function() {
            $("#subCre").click(function() {
                cust = $("#customer").val();
                address = $('#address').val();
                phone = $('#phone').val();
                amt = $('#initamount').val();
                user = '<%= session.getAttribute("user").toString()%>';
                type = '<%=session.getAttribute("type").toString()%>';
                alert(cust + address + phone + amt + user + type);
                $.post("../processor/proc2.jsp",
                        {
                            customer: cust,
                            address: address,
                            phone: phone,
                            initamount: amt,
                            user: user,
                            type: type
                        },
                function(data, status) {
                    if (status === "success") {
                        if(data.length == 11) {
                            $("#SystemMessages").append('<div class="Msg draggable"><img class="close" src="../mime/close.png">Account Added</div>'); // **Here one div
                        } else {
                            $("#SystemMessages").append('<div class="errorMsg draggable"><img class="close" src="../mime/close.png">'+ data + '</div>'); //** here 2nd div
                      }
                        $("#customer").val("");
                        $('#address').val("");
                        $('#phone').val("");
                        $('#initamount').val("");
                    }
                });

            $(".close").button().click(function() {
                $(".close").parent().css("visibility", "hidden");
            });
       });

Upvotes: 1

Views: 48

Answers (3)

Abhay Prince
Abhay Prince

Reputation: 2162

Simply use the following code 

$('.close').live('click',function(){
  $(this).parent().hide();
 });

It will definitely work, let me know if it worked.

.live() being deprecated in jQuery version 1.7 and removed in version 1.9, so you can use .on() method in the following manner 

$(document).on('click','.close',function(){
  $(this).parent().hide();
 });

Upvotes: 0

Adil Shaikh
Adil Shaikh

Reputation: 44740

You need to use event delegation for dynamically appended elements

$('#SystemMessages').on('click','.close',function(){
    $(this).parent().css("visibility", "hidden");
});

Event delegation ---> https://learn.jquery.com/events/event-delegation/

Upvotes: 2

Praveen
Praveen

Reputation: 56509

Since you have dynamically added .close element to the existing HTML, you need to delegate it using on event handler

 $(".close").button();
 $("#SystemMessages").on('click', ".close", function() {
                $(".close").parent().css("visibility", "hidden");
            });

Upvotes: 2

Related Questions