Question

我正在尝试按钮随时更改其onclick和id属性。但是对于一些人来说，我只能在第一次更改这些属性。

$("#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");    
});

这是一个例子。我看到id已经改变了，但是调用了错误的onclick函数。

我想要完成的是：

用户在表单上输入一些内容，然后点击搜索 - ＆gt;应该返回一些数据
如果有数据，则按钮应更改其ID并单击
如果没有，保持不变

Answer 1

您在ID更改为btn2之前附加了该事件，因此$("#btn2")是一个空集合。在第一个回调中绑定click处理程序，如下所示：

$("#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");    
    });
});

以下是演示：http://jsfiddle.net/73zA2/

或者，您可以将事件处理委派给元素的祖先：

$("#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");    
});

以下是该方法的演示：http://jsfiddle.net/2YKFG/

Answer 2

我建议你在更高元素上使用委托将点击绑定到，即：

$("#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");    
});

以下是jsFiddle中的解决方案：http://jsfiddle.net/WJTD5/4/

Answer 3

您是否有理由更改元素的ID？我不推荐它，而是选择使用类。这是一个例子：

$("#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

对我来说，我必须使用下面发布的内容。使用单独的.val（）和.attr（）部分不会在我的代码中运行。这是我的解决方案。

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;
}

希望这可以帮助某人。

单击后如何更改按钮的attr和id？用jquery？

4 个答案: