How to change the attr and id of a button after cl

Question

I am trying to have a button change its onclick and id attributes on the fly. But for some ready, I'm only able to change these attributes the first time.

http://jsfiddle.net/WJTD5/1/

$("#btn1").click(function () {
    window.alert("im changing id to btn2 and ho ho ho");
    $("#btn1").val("ho ho ho");
    $("#btn1").attr("id", "btn2");    
});

$("#btn2").click(function () {
    window.alert("im changing id to btn1 and hey hey");
    $("#btn2").val("hey hey");
    $("#btn2").attr("id", "btn1");    
});

Here is the example. I see that the id has changed, but the wrong onclick function is been called.

What I want to accomplish is the following:

• user enter some stuff on the form, then click search --> should return some data
• if there is data, then the button should change its id and onclick
• if not, remain the same

Answer 1

I would recommend you use a delegate on a higher element to bind the click to, i.e.:

$("#buttonParent").on('click', '#btn1', function () {
    window.alert("im changing id to btn2 and ho ho ho");
    $("#btn1").val("ho ho ho");
    $("#btn1").attr("id", "btn2");    
});

$("#buttonParent").on('click', '#btn2', function () {
    window.alert("im changing id to btn1 and hey hey");
    $("#btn2").val("hey hey");
    $("#btn2").attr("id", "btn1");    
});

Here is the solution in the jsFiddle: http://jsfiddle.net/WJTD5/4/

Answer 2

For me, I had to use something like what is posted below. Using the separate .val() and .attr() sections would NOT run in my code. This was the solution for me.

var clickSelectFav = true;

var one = function () {
    $("#heart").on('click', '#select_fav', function () {
        alert("changing id to delete_favorite");
        $("#select_fav").attr({id: 'del_fav', src: 'heart.png'});
    });
}

var two = function () {
    $("#heart").on('click', '#del_fav', function () {
        alert("changing id to select_favorite ");
        $("#del_fav").attr({id: 'select_fav', src: 'emptyheart.png'});
    });
}

function call(){
    if(clickSelectFav) one();
    else two();
    clickSelectFav = !clickSelectFav;
}

Hope this can help someone out.

Answer 3

Is there a reason you are changing the ID of the element? I would not recommend it and instead opt for using classes. Here is an example:

$("#btn1").click(function () {
    if ($(this).hasClass("state1")){
       window.alert("im changing id to btn2 and ho ho ho");
       $(this).val("ho ho ho");
       $(this).toggleClass("state1 state2");
    } else {
        window.alert("im changing id to btn1 and hey hey");
       $(this).val("hey hey");
       $(this).toggleClass("state1 state2");   
    }
});

http://jsfiddle.net/WJTD5/2/

Answer 4

You are attaching the event before the id has changed to btn2, so $("#btn2") is an empty collection. Bind the click handler in the first callback, like so:

$("#btn1").click(function () {
    window.alert("im changing id to btn2 and ho ho ho");
    $("#btn1").val("ho ho ho");
    $("#btn1").attr("id", "btn2");

    $("#btn2").unbind("click").click(function () {
        window.alert("im changing id to btn1 and hey hey");
        $("#btn2").val("hey hey");
        $("#btn2").attr("id", "btn1");    
    });
});

Here is a demonstration: http://jsfiddle.net/73zA2/

Alternatively, you can delegate event handling to an ancestor of the element:

$("#btn1").parent().on("click","#btn1", function () {
    window.alert("im changing id to btn2 and ho ho ho");
    $("#btn1").val("ho ho ho");
    $("#btn1").attr("id", "btn2");   
})
.on("click","#btn2",function () {
    window.alert("im changing id to btn1 and hey hey");
    $("#btn2").val("hey hey");
    $("#btn2").attr("id", "btn1");    
});

Here is a demonstration of that approach: http://jsfiddle.net/2YKFG/