2

我试图让一个按钮即时更改其 onclick 和 id 属性。但是对于一些准备好的，我只能在第一次更改这些属性。

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

这是示例。我看到id变了，但是调用了错误的onclick函数。

我想要完成的是以下内容：

  • 用户在表单上输入一些东西，然后点击搜索——>应该返回一些数据
  • 如果有数据，那么按钮应该改变它的 id 和 onclick
  • 如果不是，保持不变
4

4 回答 4

6

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

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

于 2013-02-26T19:32:31.977 回答
3

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

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

于 2013-02-26T19:35:22.113 回答
2

您是否有理由更改元素的 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/

于 2013-02-26T19:37:23.913 回答
0

对我来说，我不得不使用下面发布的内容。使用单独的 .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;
}

希望这可以帮助某人。

于 2019-05-24T03:04:02.973 回答