0

I am currently working on a project, where I want to make a click on an object change a class and then afterwards making the next click depend on the same jquery.

I can only get it to work the first time - afterwards it won't work. My source is as follows:

$(document).ready(function(){
    $("a.activate").click(function(){

        var elmid = $(this).attr('id');

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/advertisement/activate", // URL of the Perl script
            data: {adID: $(this).prev("input.ad_ID").val()},

            success: function(data){
                if (data.error) {
                    $('div#create_createresult').text(data.msg);
                    $('div#create_createresult').addClass("text-danger");

                    $("form#createForm input#createForm_submit").removeAttr('disabled');
                }
                else 
                {
                    var src = $("a#" + elmid + " img").attr("src").replace("activate-16x16.png", "deactivate-16x16.png");
                    $("a#" + elmid + " img").attr("src", src);

                    $("a#" + elmid).removeClass('activate').addClass('deactivate');

                    $('div#create_createresult').text(data.msg);
                    $('div#create_createresult').addClass("success");
                }
            }
        });
    });

    $("a.deactivate").click(function(){

        var elmid = $(this).attr('id');

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/advertisement/deactivate", // URL of the Perl script
            data: {adID: $(this).prev("input.ad_ID").val()},

            success: function(data){
                if (data.error) {
                    $('div#create_createresult').text(data.msg);
                    $('div#create_createresult').addClass("text-danger");

                    $("form#createForm input#createForm_submit").removeAttr('disabled');
                } 
                else 
                {
                    var src = $("a#" + elmid + " img").attr("src").replace("deactivate-16x16.png", "activate-16x16.png");
                    $("a#" + elmid + " img").attr("src", src);

                    $("a#" + elmid).removeClass('deactivate').addClass('activate');

                    $('div#create_createresult').text(data.msg);
                    $('div#create_createresult').addClass("success");
                }
            } 
        });
    });
});

My new source (as of Barbara's comment) is:

$(document).ready(function(){

    $("a.activate").on( 'click', function(){

        var elmid = $(this).attr('id');

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/advertisement/activate", // URL of the Perl script
            data: {adID: $(this).prev("input.ad_ID").val()},

            success: function(data){
                if (data.error) { // script returned error
                alert("fejl");
                    $('div#create_createresult').text(data.msg);
                    $('div#create_createresult').addClass("text-danger");

                    $("form#createForm input#createForm_submit").removeAttr('disabled');
                }
                else 
                {
                    var src = $("a#" + elmid + " img").attr("src").replace("activate-16x16.png", "deactivate-16x16.png");
                    $("a#" + elmid + " img").attr("src", src);

                    $("a#" + elmid).addClass('deactivate').removeClass('activate');

                    $('div#create_createresult').text(data.msg);
                    $('div#create_createresult').addClass("success");
                }
            }
        });
    });

    $("a.deactivate").on ( 'click', function(){

        var elmid = $(this).attr('id');

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/advertisement/deactivate", // URL of the Perl script
            data: {adID: $(this).prev("input.ad_ID").val()},

            success: function(data){
                if (data.error) {
                    alert("fejl");
                    $('div#create_createresult').text(data.msg);
                    $('div#create_createresult').addClass("text-danger");

                    $("form#createForm input#createForm_submit").removeAttr('disabled');
                }
                else 
                {
                    var src = $("a#" + elmid + " img").attr("src").replace("deactivate-16x16.png", "activate-16x16.png");
                    $("a#" + elmid + " img").attr("src", src);

                    $("a#" + elmid).addClass('activate').removeClass('deactivate');

                    $('div#create_createresult').text(data.msg);
                    $('div#create_createresult').addClass("success");
                }
            }
        });
    });
});
denlau
  • 916
  • 2
  • 9
  • 21
  • possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Jason P Sep 24 '13 at 14:53
  • 1
    You need event delegation. Look at http://api.jquery.com/on/#direct-and-delegated-events – Barbara Laird Sep 24 '13 at 14:53
  • @BarbaraLaird: Thanks, but after changing the "click" to "on( 'click', " it still doesn't work. It is still performing the ajax regarding to the default class. Anything I could have forgotten? – denlau Sep 24 '13 at 15:03
  • 2
    Your revised code isn't using event delegation, it's doing the same think that `.click()` will do. Try the proper syntax for delegation: `$(document).on( 'click', 'a.activate', function(){` – j08691 Sep 24 '13 at 15:07
  • 1
    Yep, what @j08691 said. – Barbara Laird Sep 24 '13 at 15:08
  • @j08691: Of course - tried it before I edited. Thanks though - if I didn't realize it your comment was nice. Have a nice day. – denlau Sep 24 '13 at 15:08

1 Answers1

0

Thanks to Jason, Barbara and j08691 I came up with this solution, which should fit, if you're having the same trouble.

Beware that the $(document).ready() part is removed!

The answer to my question:

$(document).on( 'click', "a.activate", function(){

    var elmid = $(this).attr('id');

    $.ajax({
        type: "POST",
        dataType: "json",
        url: "/advertisement/activate", // URL of the Perl script
        data: {adID: $(this).prev("input.ad_ID").val()},

        success: function(data){
            if (data.error) { // script returned error
            alert("fejl");
                $('div#create_createresult').text(data.msg);
                $('div#create_createresult').addClass("text-danger");

                $("form#createForm input#createForm_submit").removeAttr('disabled');
            }
            else 
            {
                var src = $("a#" + elmid + " img").attr("src").replace("activate-16x16.png", "deactivate-16x16.png");
                $("a#" + elmid + " img").attr("src", src);

                $("a#" + elmid).addClass('deactivate').removeClass('activate');

                $('div#create_createresult').text(data.msg);
                $('div#create_createresult').addClass("success");
            }
        }
    });
});

$(document).on ( 'click', "a.deactivate", function(){

    var elmid = $(this).attr('id');

    $.ajax({
        type: "POST",
        dataType: "json",
        url: "/advertisement/deactivate", // URL of the Perl script
        data: {adID: $(this).prev("input.ad_ID").val()},

        success: function(data){
            if (data.error) {
                alert("fejl");
                $('div#create_createresult').text(data.msg);
                $('div#create_createresult').addClass("text-danger");

                $("form#createForm input#createForm_submit").removeAttr('disabled');
            }
            else 
            {
                var src = $("a#" + elmid + " img").attr("src").replace("deactivate-16x16.png", "activate-16x16.png");
                $("a#" + elmid + " img").attr("src", src);

                $("a#" + elmid).addClass('activate').removeClass('deactivate');

                $('div#create_createresult').text(data.msg);
                $('div#create_createresult').addClass("success");
            }
        }
    });
});
denlau
  • 916
  • 2
  • 9
  • 21