Grabbing html of div that has been 'echoed' from AJAX call to PHP

Question

I am trying to load a dropdown menu from a server and then use jQuery to interact with that dropdown. Everything loads fine, but I can't interact with the menu items as they weren't part of the original HTML that was loaded, they were entered after AJAX got its response.

Here's the ajax code:

$(document).ready(function(){
    //load dropdown menu using ajax

    $.ajax({ url: "default/CallSupplierMongo",
        context: document.body,
        success: function (res) {
            document.getElementById("dropdownItems").innerHTML = res;
        }
    });

});

The jQuery:

$(document).load(function() {
  $('.dropdownItems > div').click(function () {
        supplierCode = $(this).html();

        $('.dropdownItems > div').css({
            'background-color': 'white',
            'color': '#888888'
        });

        $(this).css({
            'background-color': '#888888',
            'color': 'white'
        });

        $('.dropdownItems').slideUp('fast');

        $('.dropdownButton').html(supplierCode);
        $('.dropdownButton').css({
            'border-bottom-right-radius': '5px',
            'border-bottom-left-radius': '5px'
        })
    });

});

And the PHP:

function actionCallSupplierMongo() {
        self::getSuppliers();
}

private static function echoSupplierCodes($supplierCodes) {

    for ($i=0;$i<count($supplierCodes);++$i) {
        echo '<div>'.$supplierCodes[$i].'</div>';
    }

}

To explain the issue further: I want to click on the dropdown items and grab the HTML inside it. When I click, nothing is registered. I believe that's because jQuery checks to see if those <div> s exist before they are loaded and thus doesn't apply the .click function to them.

EDIT I've tried putting the AJAX call in $(document).load() but it still has no effect.

Answer 1

Problem: When you initially load your page, your JS code attaches the events (such as click() ) to the elements that are currently on the DOM, but when you load new elements to the DOM through AJAX, those new elements do not have any events binded to them. Thus the events in JS not working.

Solution: You need to delegate the event handler.

Change this:

$('.dropdownItems > div').click(function () {

To this:

$(document).on('click', '.dropdownItems > div', function () {

Source: http://api.jquery.com/delegate/

Answer 2

The problem is that you're attaching click event handlers to items that don't exist yet.

You should use the jQuery's event delegation , eg:

$('.dropdownItems').on('click', '> div', function () {

---

Note: If, for some reason, you don't want to use event delegation, and prefer to attach the events to the elements themselves, you must put the ready 's code you have into a function, and instead of calling the function when the page is ready, you must call it anytime you modify the collection.

Answer 3

$('.dropdownItems > div').click(function () {

替换为

$(document).on('click', '.dropdownItems > div', function() {

Answer 4

The answer was to call the function on success of the response from the AJAX call.

$.ajax({ url: "default/CallSupplierMongo",
    context: document.body,
    success: function (res) {
        document.getElementById("dropdownItems").innerHTML = res;

        loadDropdownFunctions();
    }
});


function loadDropdownFunctions() {

$('.dropdownItems > div').click(function () {
    supplierCode = $(this).html();

    $('.dropdownItems > div').css({
        'background-color': 'white',
        'color': '#888888'
    });

    $(this).css({
        'background-color': '#888888',
        'color': 'white'
    });

    $('.dropdownItems').slideUp('fast');

    $('.dropdownButton').html(supplierCode);
    $('.dropdownButton').css({
        'border-bottom-right-radius': '5px',
        'border-bottom-left-radius': '5px'
    })
});