jquery - 次にクリックされたアンカーのリストが機能しない

Question

それぞれが div 内のコンテンツであるアンカー タグのリストがあり、次に、読み込まれているコンテンツを前後に移動できるコントロールがあります。しかし、次または前の兄弟で click() を起動することはできません。

            var current;
            var request = new XMLHttpRequest();
            request.open("GET", "EPUBS/" + localStorage.book, false);
            if(request.overrideMimeType){
                request.overrideMimeType('text/plain; charset=x-user-defined');
            }
            request.send();
            var file = request.responseText;
            var zip =  new JSZip(file);
            var $content = $(zip.file(localStorage.selected + "/toc.ncx").asText()).find("navPoint");
            $content.each(function(){
                $('#navbar').append("<a href = '#' id = '" + $(this).children('content').attr('src') + "' > " + $(this).children('navLabel').children('text').text() + "</a><br/>");
            });

$("#navbar > a").click(function(event) {   
    event.preventDefault();
    var t2 = ($(this).attr('id')).split("#");
    var $tr = $(zip.file("6130/" + t2[0]).asText());
    document.getElementById('main').innerHTML = "";
    $('#main').append('<h1>' + $(this).text() + '</h1>');
    document.getElementById('main').innerHTML += $tr.text();
    current = t2;    
});

$("#prev").click(function(event) {    
    event.preventDefault();
    $('#' + current).prev().click();    
});

$("#next").click(function(event) {    
    event.preventDefault();
    $('#' + current).next().click();    
});

        <div id = 'navbar'>
    </div>

    <div id = 'main'>
        <h1 id = 'mHeading'>Book</h1>
        <img src = 'book.png' width = '500px'/>
        <p id = "d"></p>
    </div>

    <div id = 'controls'>
        <table>
            <tr>
                <td width = "12%"><a href = "#"  id = "c1" onclick = "document.getElementById('main').style.color = 'black'; document.getElementById('main').style.backgroundColor = 'white';">black on white</a></td>
                <td width = "12%"><a href = "#"  id = "c2" onclick = "document.getElementById('main').style.color = 'white'; document.getElementById('main').style.backgroundColor = 'black';">white on black</a></td>
                <td width = "10%"></td>
                <td><a href = "#"  id = "prev" ><</a></td>
                <td><a href = "#"  id = "next" >></a></td>
                <td width = "5%"><a href = "#" id = "s1" style = "font-size: 12px" onclick = "document.getElementById('main').style.fontSize = '14px'">A</a></td>
                <td width = "5%"><a href = "#" id = "s1" style = "font-size: 16px"  onclick = "document.getElementById('main').style.fontSize = '16px'">A</a></td>
                <td width = "5%"><a href = "#" id = "s1" style = "font-size: 20px"  onclick = "document.getElementById('main').style.fontSize = '20px'">A</a></td>
            </tr>
        </table>
    </div>

私はそれを間違って書いていますか？最初の .click 関数は完全に機能します

編集:残り​​のコードを追加しましたが、ロードされている多くの外部ファイルを使用していますが、それらは機能しますが、最初のクリックメソッドで追加された次または前のアンカーにアクセスできません

Answer 1

とにかく返されるIDは文字列でなければならないので、 split() は必要ないと思います。私は使うだろう：

current = $(this).attr('id');

これがどのように機能するかは正確にはわかりませんが、宣言するときに current をデフォルト値として設定する価値があると思いますか? (何らかの理由で、最後の 2 回のクリック関数が最初の関数の前に呼び出された場合は?)

Answer 2

最後の 2 つの関数でcurrentは定義されていません。