Cant Click On Button With Is Loaded With Ajax

I am loading a content into a #result div. In that content, there is a button. After the contrnt was loaded with ajax, i cant click on that button, i dont get the alert. (the page

Solution 1:

You assign the click event function before the element (button) actually exists. Therefore there is no element to bind the click event to. You can bind the click event to the document instead:

$(document).on('click', '#savePrices', function(e) {
    alert(...);
});

Completely untested though ...

Solution 2:

The onclick assignment ($('#savePrices').click(...)) is run once when the web page has loaded. But your pricing buttons are not there yet.

Run it again when the AJAX .success is executed:

<scripttype="text/javascript">
$(document).ready(function(e) 
{

    $('#printButton').hide();

    $('#submitButton').click(function(e)
    {
        var kat = $('#kategoria').val();
        $.ajax({
            type: 'POST',
            url: 'files/get_arlista_kategoria.php',
            data: { kat: kat },
            dataType: "html",
            cache: false,
            beforeSend: function(){
                $('#preloaderImage2').show();
            },
            success: function(data)
            {
                var result = $.trim(data);
                $('#result').html(result);

                // assign onclick
                $('#savePrices').click(function(e)
                {
                    alert("Its oké");
                });

                $('#printButton').show();
            },
            complete: function(){
                $('#preloaderImage2').hide();
            }
        });
    });

});

</script>