1

プレーンテキストAPIを使用してリンクロックWebサイト用のマルチリンクロッカーを作成しています（ot：YQLを使用してこれを実現していますが、まだそれほど進んでいません）

localStorageを使用してユーザーのAPIキーを保存します。しかし、私は問題を抱えています。キーが追加され、ユーザーが保存を押すと、リンク追加フォームが表示されます。ここから、「このキーが正しくない場合は、ここをクリックしてください。」をクリックすると、ユーザーがもう一度リンクをクリックするまで何も起こりません。

「追加」ボタンについても同じことが言えます。2回クリックする必要があります。また、追加ボタンがクリックされた場合は、「このキーが正しくない場合は、ここをクリックしてください。」リンクは意図したとおりに動作します。主なことは、問題のクリック可能な要素のいずれかが期待どおりに動作する前に、ページ上のクリック可能な要素を1回クリックする必要があるということです。

デフォルトのイベントアクションに関係しているのではないかと思ったので、preventDefault（）を使用して、何かが修正されたかどうかを確認しましたが、役に立ちませんでした。もっと知識のある人に助けてもらいたいです。

ここにデモをオンラインで掲載しました：APIツール、GitHubリポジトリはここにあります：GitHub

テストするキーフォームに任意の文字列値を入力します。また、最初に「追加」ボタンをクリックしてください。ページが「/？」に移動する方法に注意してください。それはそれと何か関係がありますか？以下のコードを参照してください。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Shrink Once API Tools</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"></link>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"></link>
</head>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <h1 class="head-title">Shrink Once API Tools</h1>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="flashAlert">

                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="mainFormContent">

                </div>
            </div>
        </div>
    </div>

    <!-- Include JavaScript at the very bottom for faster page loads -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!--
    Fall back on local JQuery if Google CDN version is unavailable.
    (Since most sites link the Google CDN version, it is more likely
    to already be cached by the user's browser).
    -->
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
    <!-- end Fallback -->
    <script src="js/bootstrap.js"></script>
    <script>
        $(function () {
            var apiKeyForm = '<form class="apiKeyForm">'
                           + '<legend>Enter your API Key</legend>'
                           + '<input type="text" id="apiKey" class="span12" placeholder="e.g. ab12c34d5678efgh90123i45678j90k1">'
                           + '<span class="help-block">You can find your access key <a href="https://shrinkonce.com/index.php?menu=usercp#tools" target="blank">here.</a></span>'
                           + '<button id="saveAPIKey" class="btn btn-info btn-large btn-block">Save</button>'
                           + '</form>';

            var apiLinkForm = '<form class="apiLinkForm">'
                            + '<legend>Add a link or two... or more.</legend>'
                            + '<button id="add" class="btn btn-large">Add</button>'
                            + '<button id="remove" class="btn btn-large">Remove</button>'
                            + '<button id="reset" class="btn btn-large">Reset</button>'
                            + '<button class="btn btn-info btn-large">Submit</button>'
                            + '<hr />'
                            + '<div id="linkForm">'
                            + '</div>'
                            + '</form>';

            if (localStorage.length > 0) {
                $('<div class="alert alert-success">Your API token is <b>' + localStorage.getItem('apiKey') + '</b>. If this key is incorrect, click <a href="" class="resetLocalStorage">here</a>.</div>').appendTo('.flashAlert').fadeIn('slow');
                $(apiLinkForm).fadeIn('slow').appendTo('.mainFormContent');
            }
            else {
                $('<div class="alert alert-error">You have not yet entered your API token. Add it below, and it will be persisted in memory.</div>').appendTo('.flashAlert').fadeIn('slow');
                $(apiKeyForm).fadeIn('slow').appendTo('.mainFormContent');
            }

            var i = $('#linkForm input').size() + 1;
            $('#add').click(function (e) {
                e.preventDefault();
                $('<input type="text" id="inputLink' + i + '" class="shrinklink span12" placeholder="http://google.com">').fadeIn('slow').appendTo('#linkForm');
                i++;
                return false;
            });
            $('#remove').click(function (e) {
                e.preventDefault();
                if (i > 1) {
                    $('.shrinklink:last').fadeOut('normal', function () { $(this).remove(); });
                    i--;
                }
                return false;
            });
            $('#reset').click(function (e) {
                e.preventDefault();
                while (i > 1) {
                    $('.shrinklink:last').remove();
                    i--;
                }
                return false;
            });
            $('#saveAPIKey').click(function (e) {
                e.preventDefault();
                if ($('#apiKey').val().length > 0) {
                    localStorage.setItem('apiKey', $('#apiKey').val());
                    $('.alert').replaceWith('<div class="alert alert-success">Your API token is <b>' + localStorage.getItem('apiKey') + '</b>. If this key is incorrect, click <a href="" class="resetLocalStorage">here</a>.</div>');
                    $('.apiKeyForm').replaceWith(apiLinkForm);
                }
                else {
                    $('.alert').replaceWith('<div class="alert">You did not enter your API key! Please enter it below.</div>');
                }
                return false;
            });
            $('.resetLocalStorage').click(function (e) {
                e.preventDefault();
                localStorage.clear();
                location.reload();
                return false;
            });
        });
    </script>
</body>

4

3 に答える 3

2

.click問題は、その時点でDOMに存在するアイテムのイベントハンドラーを（メソッドを使用して）バインドしていることです。これらは、後で追加されたノードでは機能しません。これは、ここでのケースです（たとえば、「。mainFormContent」へのリンクを含むメッセージを追加します）。

最も簡単な修正は、の使用法を次のようなメソッド.clickに置き換えることです。.on

$(document).on('click', '.resetLocalStorage', function (e) {
    e.preventDefault();
    localStorage.clear();
    location.reload();
    return false;
});

これは簡単な修正であることに注意してください。アーキテクチャのアプローチに関しては、それは最善ではありませんが、それはまったく別の質問です。

于 2012-10-25T10:45:11.793 に答える
1

クリックリスナーを追加した方法は次のようになります（これはコードの読みやすさのためでもあり、最終的にはすべてを再理解するためです）。

if (localStorage.length > 0) {
   var api_key = localStorage.getItem('apiKey');
   var bold_api_key = $("<b>").text(api_key);
   var alert_div = $("<div>").addClass("alert alert-success");
   var pre_span = $("<span>").text("Your Api token is: ");
   var post_span = $("<span>").text(" if this key is incorrect, click ")       
   var wrong_key_link = $("<a>").text("here");

   wrong_key_link.on("click", function(e){
     e.preventDefault();
     localStorage.clear();
     location.reload();
     return false;
   });

   alert_div.append(pre_span, bold_api_key, post_span, wrong_key_link);
   alert_div.appendTo(".flashAlert").fadeIn("slow");
}

私はこのコードをテストしていませんが、これはうまくいくかもしれないと思います。

于 2012-10-25T10:46:55.950 に答える
0

@WTKどうもありがとうございました！私の状況でも機能します。コードを次のように変更しました：

$('.postAreaDiv').bind('focusin click', function() {
    event.stopPropagation();
    $('.status_label', this).removeClass('visible').addClass('hidden');
    $('.status_textarea', this).focus();
});

に

/* placeholder focus in/out logic */
// focus in
$(document).on('click', '.postAreaDiv', function (e) {
    e.stopPropagation();
    $('.status_label', this).removeClass('visible').addClass('hidden');
    $('.status_textarea', this).focus();
});

今では完璧に動作します！

ありがとう！

于 2013-06-25T17:05:57.133 に答える