[解決済み] アンカーのonClick()処理にjQuery clickを使用する。

質問

以下のように、動的に生成されるアンカータグのセットを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のクリックハンドラ内にはフローが来ません。 上記のアラートが使用されていることで確認しました。アラート'here'が表示されるだけで、アラート'here in'は表示されません。 2回目にリンクをクリックすると、すべてがdivIdの正しい値で完全に動作します。

どうすればいいですか？

最初にリンクをクリックしたときに 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 が使用され、それ以外は無視されます。