ajax loaded content issue with chrome

Question

I have a problem when I dynamically load content with the following code.

$(document).ready(function() {
             $("#tags").keyup(function(){
                        var q = $(this).val(); 
                        $.ajax({ 
                            url: '/AnswerMedia/utilities/autoSearch/model/suggest.php?q='+q, 
                            success: function (data) {
                                $("#ajaxDiv").html(data); 

                            },
                            error: function (request, status, error) {
                            alert(request.responseText);
                        }
                    });  
            });
        });

After the content loads, this code was intended to trigger an event when one of the loaded div tags is clicked, but did not.

$(".pdiv").click(function(){
    var val = $(this).text();
    $('#tags').val(val);
    $('.mncontr').hide();
});
$("#closeSearch").click(function(){
    $('.mncontr').hide();   
});

Then I tried the following code:

$("body").delegate(".pdiv", "click", function(){
    var val = $(this).text();
    $('#tags').val(val);
    $('.mncontr').hide();
});
$("body").delegate("#closeSearch", "click", function(){
    $('.mncontr').hide();   
});

It works well in Firefox, but in Chrome the problem persists. Please help me.

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

From this SO post:

If you want the click handler to work for an element that gets loaded dynamically, then you set the event handler on a parent object (that does not get loaded dynamically) and give it a selector that matches your dynamic object like this:

$('#parent').on("click", "#child", function() {});

The event handler will be attached to the #parent object and anytime a click event bubbles up to it that originated on #child, it will fire your click handler. This is called delegated event handling (the event handling is delegated to a parent object).

It's done this way because you can attach the event to the #parent object even when the #child object does not exist yet, but when it later exists and gets clicked on, the click event will bubble up to the #parent object, it will see that it originated on #child and there is an event handler for a click on #child and fire your event.

edited May 23 '17 at 12:05

Community

1
1

answered Aug 17 '13 at 20:55

Greg Kramida

4,064
5
30
46

Thanks you very much Greg Kramida for your help now its working fine – Sanjay Gupta Aug 18 '13 at 18:33
Soory dear Its very unexpected its were working nice but suddenly Its not working in chrom..do u have any other solution? – Sanjay Gupta Aug 22 '13 at 19:01
$("body").on("click", ".pdiv", function(){ var val = $(this).text(); $('#tags').val(val); $('.mncontr').hide(); }); not working in chrome – Sanjay Gupta Aug 22 '13 at 19:46
Are you saying it was working in Chrome, then you did something to it, then it stopped working? Or are you saying that it never worked in Chrome at all? – Greg Kramida Aug 23 '13 at 14:58

ajax loaded content issue with chrome

1 Answers1