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 に答える