Question

I am quite new to Jquery and need help trying to get a few events to run on the same page. I have two sections of events, one is a .get which passes data to a file and then displays retrieved data, this happens on page load. The second section is on click events which send and receive data when a button is clicked.

These events all work as needed, but if I have both sections on one page the on click events do not work. Below is the code I have and I hope someone knows how to get them all to work? Thanks

<script type="text/javascript"> 
    $.get("/layout/standard/check.php", { url: "domain"}, function(data){
        $("#content-area").html(data)
    });

    $(".discuss").click( function() {
        $.post('/layout/standard/report-action.php', {form: "discuss"},function(data){
        $(".message").html(data);
        $(".message").show("slow");
    });
    });
    $(".request").click( function() {
        $.post('/layout/standard/report-action.php', {form: "request"},function(data){
        $(".message").html(data);
        $(".message").show("slow");
    });
    });
    $(".report").click( function() {
        $.post('/layout/standard/report-action.php', {form: "report"},function(data){
        $(".message").html(data);
        $(".message").show("slow");
    });
    });
</script>

---

I believe that I have found why it’s not working, the onclick links are put on the page by the get event. It would appear that the buttons work if they’re already on the page but not if they are inserted this way.

This doesn’t make sense to me as the buttons are still acting as links with no problem…

Answer 1

Try delegation.. and putting your code inside a document.ready function

$(function() {
    $.get("/layout/standard/check.php", {
        url: "domain"
    }, function(data) {
        $("#content-area").html(data)
    });

    $("body").on('click','.discuss,.request,.report',function() {
        $.post('/layout/standard/report-action.php', {
            form: $(this).attr('class') //this is assuming you only have 1 class per element
        }, function(data) {
            $(".message").html(data);
            $(".message").show("slow");
        });
    });
});​