1

我正在使用他们的纯文本 API 为链接锁定网站制作一个多链接储物柜（ot：使用 YQL 来完成这个，但还没有那么远）

它使用 localStorage 来保存用户的 API 密钥。但我有一个问题。添加密钥并且用户点击保存后，将显示链接添加表单。从这里开始，当单击“如果此密钥不正确，请单击此处。”时，直到用户再次单击该链接时才会发生任何事情。

“添加”按钮也是如此。必须点击两次。此外，如果单击添加按钮，“如果此键不正确，请单击此处”。链接按预期运行。主要的是，页面上的任何可点击元素都必须在任何一个相关可点击元素按预期运行之前单击一次。

我认为这可能与默认事件操作有关，所以我尝试使用 preventDefault() 来查看它是否修复了任何问题，但无济于事。我真的很想从知识渊博的人那里得到一些帮助。

我已经把demo放在这里了：API Tools，GitHub repo可以在这里找到：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”链接的消息）。

最简单的解决方法是替换.clickwith.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 回答