2016-03-31 18 views
0

私はasp.netボタンとasp.netオプションボタンがあるjQueryポップアップを持っています。リンクボタンを使用してポップアップが表示されます。ユーザーがリンクボタンをクリックすると、ポップアップが表示されます。ASP.NET - jQueryを使用して動的にボタンを追加/削除する

ボタンのCSSスタイルプロパティがあります。以下はCSSコード

.btninfo { 
    background-color: #00C0EF; 
    border-color: #269abc; 
    color: #fff; 
} 

    .btninfo:hover { 
     color: #fff; 
     background-color: #00ACD6; 
     border-color: #269abc; 
    } 

ポップアップが最初に読み込まれるとき、私は以下のコードを使用してボタンを無効にしています。オプションボタンを選択すると

$("[id*=lnkBtn]").live("click", function() { 
      $("#ContentPlaceHolder1_btnDelete").show(); 
      $("#ContentPlaceHolder1_btnDelete").attr('disabled', 'disabled'); 
      $("#ContentPlaceHolder1_btnDelete").css("color", "#fff").css("background-color", "#C8CBCB").css("border-color", "#C8CBCB"); 
      a.parent().appendTo($("form:first")); 
      return false 
     }); 

、私は次のコードを使用して、ボタンを有効にしています

$("[id*=opnSelect]").live("click", function() { 
      $("#ContentPlaceHolder1_btnDelete").show(); 
      $("#ContentPlaceHolder1_btnDelete").css("color", "#fff").css("background-color", "#00C0EF").css("border-color", "#269abc"); 
      $("#ContentPlaceHolder1_btnDelete").addClass('.btninfo:hover'); 
      $("#ContentPlaceHolder1_btnDelete").prop('disabled', false); 
     }); 

すべてが正常に動作しているが、私はボタンのホバーCSSを適用することはできませんよ。私は以下の機能を試してみましたが、マウスを動かせば背景色が初期状態に変わらないように、ボタンを動かすことができます。

$(function() { $("#ContentPlaceHolder1_btnDelete").mouseover(function() { $(this).css("background-color", "#00ACD6") }); }); 

誰でも私が間違っていることを教えていただけますか?

+0

をクラスを追加し、削除しますか? .live()は約5年間使用されなくなりました。代わりに.on()を使用してください。また、あなたのjQueryセレクタが次のようになっているのはなぜですか?$( "[id * = opnSelect]")??これは単純に$( '#opnSelect')にする必要があります – frenchie

答えて

2
その後、

使用クラスの代わりに、CSS、必要に応じてあなたはjQueryのどのバージョンを使用している

.btninfo { 
background-color: #00C0EF; 
border-color: #269abc; 
color: #fff; 
} 

.btninfo:hover { 
    color: #fff; 
    background-color: #00ACD6; 
    border-color: #269abc; 
} 

//new class with styles for disabled button 
.btnDisabled{ 
    color: #fff; 
    background-color: #C8CBCB; 
    border-color: #C8CBCB; 
} 

、その後、あなたのコード内

//when disable button add this class btnDisabled 
    $("#ContentPlaceHolder1_btnDelete").addClass('btnDisabled').removeClass('btninfo'); 

//when enable button add back the original class which inlcudes the `hover` styles 
    $("#ContentPlaceHolder1_btnDelete").addClass('btninfo').removeClass('btnDisabled'); 
関連する問題