Why does my jquery script not work?

Question

I wrote a script, which get data (in Json type) from a method and show it in div tag with a close button, when i click on close button it is not work! my script is:

 $(document).ready(function () {
        $("#go").click(function () {
            setInterval(function () {
                $.ajax({
                    type: "POST",
                    url: "WebForm2.aspx/GetMyBooks",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {

                        for (var i = 0; i < response.d.length; i++) {
                            $("#pejiGrid").append("<div class='modal'><div style='float:left;'><span class='close'>X</span></div>" + response.d[i].BOOK_NAME + "<br/>" + response.d[i].BOOK_DESC + "</div><br/>");
                        };
                    },
               });
                $('.modal').hover(
                    function () {

                        $(this).find('.close').delay(0).fadeIn(300);

                    },
                     function () {

                         $(this).find('.close').delay(0).fadeOut(500);
                     });

            }, 5000);
        });

        $('span.close').click(
            $(this).closest('div.modal').fadeOut(0)
            );
       });

What is the problem?

EDIT : about my hover script i should say it shows the close button by delay but i gave zero to delay value :

 $('.modal').hover(
                    function () {

                        $(this).find('.close').delay(0).fadeIn(300);

                    },
                     function () {

                         $(this).find('.close').delay(0).fadeOut(500);
                     });

some body can help me what is the problem?

score 4 · Accepted Answer · answered Feb 17 '14 at 08:25

4

You need to use event delegation here to bind the click event to your dynamically created div and span element inside #pejiGrid:

$('#pejiGrid').on('click', 'span.close', function() {
    $(this).closest('div.modal').fadeOut(0);
});

answered Feb 17 '14 at 08:25

Felix

37,892
8
43
55

+1 Now I'm upvoting you...the funny thing is, it's the exact same problem! Good answer. – Ethan Brown Feb 17 '14 at 08:32
Thanks.. can you help me about my problem which is about my hover script? – user3304614 Feb 17 '14 at 08:56

Why does my jquery script not work?

1 Answers1