jQuery addClass（）もattr（ "href"、何か）を使用していると動作しません

Question

2回目のクリックでのみ動作するリンクを（Bootstrapボタンの形で）作成したいと思います。最初のクリックで、その外観を少し変えることになっています。このため私は.addClass(newClass),、次にattr("href", newUrl)を使います。

（編集）明確にするには：最初に、リンク（アンカー）にはhrefターゲットとして「＃」が付き、onlickハンドラがあります。そのハンドラは、最初のクリックで実行されるとアンカーから削除され、代わりにhref属性に目的のターゲットURLを設定します。これは、リンクがの第2のクリックでターゲットURLにリダイレクトされることになっています）。attr()の設定を省略した場合に限り、これはほとんど機能します。そこにあるとき、クラスはスクリプトが終了するとすぐにリンクの古いクラスに戻ります。デバッガでそれをステップ実行すると、リンクは予期したとおりに簡単に外観が変更されますが、イベントハンドラが終了すると元に戻ります。

これは、HTMLコードです：私は非常にJSとjQueryで経験していないよ、それはこれが私の上の愚かな間違いであることを十分に可能だ

function enabletwoclickbutton(btn_id, url) { 
    var whichbtn = '#' + btn_id; 
    var btn = $(whichbtn); 
    if (btn.hasClass("btn-warning")) { 
     btn.off("click"); 
     btn.attr("href", url); 
     btn.removeClass('btn-warning'); 
     btn.addClass('btn-danger'); 

    } else { 
     console.log("Hey, this shouldnt happen."); 
    } 

} 

：

<a id="twoclick-vjffkrzw" onclick="enabletwoclickbutton('twoclick-vjffkrzw', 
'http://localhost/something.php?cmd=admin&amp;func=userdetail&amp;pk=53&amp;action=removerole&amp;rolepk=1')" 
class="btn btn-xs btn-warning" href="#">Remove this</a> 

スクリプトしかし、私はそれを見ることができません。

Answer 1

アンカーのデフォルトの動作を回避するためにe.preventDefault()を使用してください。

あなたの方法は（ただし、私はあなたが読みやすくするために、以下の1と後で変更することは容易に行くことをお勧めします。）

HTML

<a id="twoclick-vjffkrzw" onclick="enabletwoclickbutton(event,'twoclick-vjffkrzw', 'http://localhost/something.php?cmd=admin&amp;func=userdetail&amp;pk=53&amp;action=removerole&amp;rolepk=1')" class="btn btn-xs btn-warning" href="#">Remove this</a> 

JS

function enabletwoclickbutton(e,btn_id, url) { 
    var whichbtn = '#' + btn_id; 
    var btn = $(whichbtn); 
    if (btn.hasClass("btn-warning")) { 
     e.preventDefault(); 
     //btn.off("click"); 
     btn.attr("href", url); 
     btn.removeClass('btn-warning') 
      .addClass('btn-danger'); 

    } else { 
     console.log("Hey, this shouldnt happen."); 
    } 

} 

Recommen

あなたのコードに見られるように、非常に読みにくいjavascriptとhtmlを混用しないでください。コード全体をJavaScriptで書くことができます

例：

$('#twoclick-vjffkrzw').click(function(e){ 
 
    var btn = $(this); 
 
    if (btn.hasClass("btn-warning")) { 
 
     e.preventDefault(); 
 
     //btn.off("click"); 
 
     btn.attr("href", 'http://localhost/something.php?cmd=admin&func=userdetail&pk=53&action=removerole&rolepk=1'); 
 
     btn.removeClass('btn-warning'); 
 
     btn.addClass('btn-danger'); 
 

 
    } else { 
 
     console.log("Hey, this shouldnt happen."); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="twoclick-vjffkrzw" class="btn btn-xs btn-warning" href="#">Remove this</a>

Answer 2

ボタンを初めてクリックするかどうかを確認する必要があります。これを行うには、変数を使用できます。デフォルトのリダイレクトを停止するようonclick関数呼び出しの後return false;を追加

var clk=0; 
function enabletwoclickbutton(btn_id, url) { 
if(clk==0){ 
clk++; 
}else{ 
clk=0; 
var whichbtn = '#' + btn_id; 
    var btn = $(whichbtn); 
    if (btn.hasClass("btn-warning")) { 
     btn.off("click"); 
     btn.attr("href", url); 
     btn.removeClass('btn-warning'); 
     btn.addClass('btn-danger'); 

    } else { 
     console.log("Hey, this shouldnt happen."); 
    } 
} 

チェックjsfiddle

Answer 3

まず以下のコードを確認してください。その後、あなたの関数では、nullにonclickを設定して、2度目に呼び出されないようにすることができます。

function enabletwoclickbutton(btn_id, url) { 
 
    var whichbtn = '#' + btn_id; 
 
    var btn = $(whichbtn); 
 
    if (btn.hasClass("btn-warning")) { 
 
    btn.off("click"); 
 
    btn.attr("href", url); 
 
    btn.removeClass('btn-warning'); 
 
    btn.addClass('btn-danger'); 
 
    btn.attr('onclick', null); 
 
    } else { 
 
    console.log("Hey, this shouldnt happen."); 
 
    } 
 

 
}

.btn-warning { 
 
    color: orange; 
 
} 
 
.btn-danger { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="twoclick-vjffkrzw" onclick="enabletwoclickbutton('twoclick-vjffkrzw', 
 
'http://localhost/something.php?cmd=admin&amp;func=userdetail&amp;pk=53&amp;action=removerole&amp;rolepk=1');return false;" class="btn btn-xs btn-warning" href="#">Remove this</a>

Answer 4

Iは

<a data-action="http://localhost/something.php?cmd=admin&amp;func=userdetail&amp;pk=53&amp;action=removerole&amp;rolepk=1" class="btn btn-xs btn-warning my-btn" href="#">Remove this</a> 

（明確にするために添加my-btnクラス）url値を格納するdata属性を使用したいそしてjQueryを使ってclick機能を設定する代わりにonClick属性を使用して（as it's not good practice ）：

クラスの存在を確認する（A.Wolffコメント@ ）

$('.my-btn').click(function(event){ 
    // prevent default click action: 
    event.preventDefault(); 
    if ($(this).hasClass("btn-warning")) { 
     $(this).removeClass('btn-warning').addClass('btn-danger'); 
    }else{ 
     // go to url on a second click: 
     location.href = $(this).data("action"); 
    } 
}); 

---

EDITところで
は：実際には無意味です。 clickイベントが...とにかく秒クリックするだけで、様々な答えからの入力に

$('.my-btn').click(function(event){ 
    event.preventDefault(); 
    $(this).removeClass('btn-warning').addClass('btn-danger') 
      .off('click').attr('href', $(this).data("action")); 
}); 

Answer 5

を取り扱うことはありません、私は何が起こっているかを知ることができました。

明らかに変更されたhrefは、の後にだけ実行され、イベントハンドラは終了します。私の設定では、同じページにリダイレクトされたので、ボタン/リンクが元の状態に戻り、attr()の設定が正しく機能しなかったと私は思っていました。

キーは、新しいURLを設定する前に単にevent.preventDefault()と呼ぶことでした。

JSのボタンクリックハンドラを直接（直接的または間接的に）生成することをお勧めします。私はこれがコードをより読みやすくするとは思わない（HTMLを読めない唯一のものはロングURLだ）.HTMLが動的に生成されるので、これは実用的な解決策ではないだろう。

だから、ファイナライズしたコードは次のようになります。

function enabletwoclickbutton(e, btn_id, url) { 
    var whichbtn = '#' + btn_id; 
    var btn = $(whichbtn); 
    if (btn.hasClass("btn-warning")) { 
     e.preventDefault(); 
     btn.off("click"); 
     btn.attr("href", url); 
     btn.removeClass('btn-warning'); 
     btn.addClass('btn-danger'); 
    } else { 
     console.log("Hey, this shouldnt happen."); 
    } 

} 

今ではexectedとして動作します。