How to execute JavaScript function in an Ajax() Response

Question

I have a home page that load the ajax() response and post it to UL as LI content, with the same page I have script function that can select the LI content with trigger for another function, but isn’t working.

PAGE 1

HTML

<ul id="feature-deals" class="list-products allShopping-deals">         
</ul>

SCRIPT

$(document).ready(function(){
    $.ajax({
        url: "Product/Shopping-Trending-Items.php", 
        success: function(result){
            $(".allShopping-deals").html(result);
        }
    });

$(".products").click(function (){   
        alert ($('.pid', this).text());

PAGE 2

HTML

  <li class="products">
<span class="pid">1234</span>
</li>

page 1 == home page w/(ajax() load function + click function) ----> page 2 == Li content holding pid and waiting to load by ajax() ----> target output is to alert the pid value but the script is in page 1

I don't understand the question. First you say "load the ajax() response and post it to UL as LI content, with the same page", but then you say they're on different pages. You can't use javascript to modify the DOM of a second page. If they are the same page, please modify your question. — Auspex
– Auspex, Commented Jun 14, 2015 at 15:58

A. Wolff · Accepted Answer · 2015-06-14 15:29:36Z

3

You should delegate event:

$(".allShopping-deals").on('click', '.products', function(){
    alert($(this).find('.pid').text());
});

answered Jun 14, 2015 at 15:29

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mon-sun Over a year ago

thanks! this one also works for me :) learned exactly how to delegate

Barry · Accepted Answer · 2015-06-14 15:38:49Z

1

You have a timing issue. The ajax call is made but the statement for assigning the click event will not wait for the result and executes. The ajax call is asynchronous.

Put the assigning of the click event inside success handler of the ajax call.

success: function(result){
            $(".allShopping-deals").html(result);
            $(".products").click(function (){   
                alert($(this).find('.pid').text());
            }
        }

edited Jun 14, 2015 at 15:38

answered Jun 14, 2015 at 15:33

Barry

3,7331 gold badge20 silver badges25 bronze badges

2 Comments

mon-sun Over a year ago

awesome works pretty good. the other answer is also correct :) which is good in ruleof thumb for coding? delegate event or jusst putting in success?

Barry Over a year ago

I would go for Wolff's solution. The delegate will automatically assign the click event to newly added items. So the success handler doe not have to 'know' a click event is needed for the newly added item. I have learned something new as well :).

Collectives™ on Stack Overflow

How to execute JavaScript function in an Ajax() Response

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related