web-dev-qa-db-ja.com

jQueryクリックを使用してアンカーonClick（）を処理します

次のように、forループに動的に生成されたアンカータグのセットがあります。

<div id = "solTitle"> <a href = "#"  id = "' + tagId + '" onClick = "openSolution();"> ' + solTitle + '</a></div> <br>';

このコードが実行されると、いずれかのケースのHTML出力は次のようになります。

<div id = "solTitle"> <a href = "#"  id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br>

<div id = "solTitle"> <a href = "#"  id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br>

上記のリンクをクリックすると、さまざまなテキストが表示されるようになりました。 openSolution（）は次のようになります。

function openSolution() {
    alert('here');
    $('#solTitle a').click(function(evt) {
        evt.preventDefault();
        alert('here in');
        var divId = 'summary' + $(this).attr('id');

        document.getElementById(divId).className = '';

    });
}

実行していずれかのリンクをクリックしても、フローはjqueryクリックハンドラー内には入りません。上記のアラートを使用して確認しました。アラート-「ここ」のみを表示し、アラート-「ここ」を表示しません。リンクを2回クリックすると、すべてがdivIdの正しい値で完全に機能します。

javascriptjqueryclickanchor
60
crazy_coder

初めてリンクをクリックすると、openSolution関数が実行されます。その関数はclickイベントハンドラーをリンクにバインドしますが、実行しません。リンクを2回クリックすると、clickイベントハンドラーが実行されます。

あなたがしていることは、そもそもjQueryを使用するという点を打ち負かしているようです。そもそもクリックイベントを要素にバインドするだけではどうでしょうか。

$(document).ready(function() {
    $("#solTitle a").click(function() {
        //Do stuff when clicked
    });
});

この方法では、要素にonClick属性を必要としません。

また、同じid値（「solTitle」）を持つ複数の要素があるように見えますが、これは無効です。他の一般的な特性を見つける必要があります（通常、classが適切なオプションです）。出現するid="solTitle"をすべてclass="solTitle"に変更すると、クラスセレクターを使用できます。

$(".solTitle a")

重複するid値は無効であるため、同じidの複数のコピーに直面すると、コードは期待どおりに機能しません。起こりやすいのは、そのidを持つ要素の最初の出現が使用され、他のすべてが無視されることです。

90
James Allardice

Javascript関数を呼び出すonclickイベントでアンカータグを取得できます。

<a href="#" onClick="showDiv(1);">1</a>

今、javascriptで以下のコードを書きます

function showDiv(pageid)
{
   alert(pageid);
}

これにより、「1」のアラートが表示されます。..

8
Tapan kumar

HTMLは次のようになります。

<div class="solTitle"> <a href="#"  id="solution0">Solution0 </a></div>
<div class="solTitle"> <a href="#"  id="solution1">Solution1 </a></div>

<div id="summary_solution0" style="display:none" class="summary">Summary solution0</div>
<div id="summary_solution1" style="display:none" class="summary">Summary solution1</div>

そして、javascript：

$(document).ready(function(){
    $(".solTitle a").live('click',function(e){
        var contentId = "summary_" + $(this).attr('id');
        $(".summary").hide();
        $("#" + contentId).show();
    });
});

例を参照してください： http://jsfiddle.net/kmendes/4G9UF/

5
Karl Mendes
<div class = "solTitle"> <a href = "#"  id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br>

<div class= "solTitle"> <a href = "#"  id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br>



$(document).ready(function(){
    $('.solTitle a').click(function(e) {
        e.preventDefault();
        alert('here in');
         var divId = 'summary' +$(this).attr('id');

        document.getElementById(divId).className = ''; /* or $('#'+divid).removeAttr('class'); */

    });
 });

私はいくつかのことを変更しました：

  1. onclick attrを削除し、document.ready内のクリックイベントをバインドします。
  2. solTitleをクラスのIDに変更：idを繰り返すことはできません
3
Toni Michel Caubet

要素に対して同じIDを複数回使用することはできません。それはユニークであることを意図しています。

クラスを使用して、IDを一意にします。

<div class="solTitle" id="solTitle1"> <a href = "#"  id = "solution0" onClick = "openSolution();">Solution0 </a></div>

クラスセレクターを使用します。

$('.solTitle a').click(function(evt) {

    evt.preventDefault();
    alert('here in');
    var divId = 'summary' + this.id.substring(0, this.id.length-1);

    document.getElementById(divId).className = ''; 

});
2
Didier Ghys

関数内でonclickイベントを割り当てています。つまり、関数が1回実行されると、2番目のonclickイベントも要素に割り当てられます。

関数onclickを割り当てるか、jquery click()を使用します。

両方を持つ必要はありません

1
clem