Question

对于模棱两可的标题感到抱歉，但我无法想到更好的事情。

我已经在这个问题上苦苦挣扎了几天，并且无法找到解决方法。关于我的代码的一些背景知识：我有一个文本框savedInfo，它存储来自不同会话的值。因此，如果savedInfo为空，我希望用另一个textbox与用户对峙。用户将信息输入textbox并按enter后，.val()的{{1}}将转到textbox，savedInfo将替换为textbox悬停时出现2个按钮的标签。这两个按钮使用户可以删除或保存textbox。

我遇到的问题是我的代码似乎没有正确流动。例如，我有一个if语句，用于检查savedInfo是否为空，如果它不是，则显示savedInfo的标签文本。然后在keypress函数中，我检查是否按下了其中一个悬停按钮但代码不起作用，因为它在keypress函数内。如果我将其从keypress功能中取出，那么当keypress标签出现时，它就不起作用。

如果我用伪代码解释，可能是最好的：

$(document).ready(function() {
if($("savedInfo").val() != "") {
  someDiv..innerHTML(<label>$("savedInfo").val() + hover shows buttons</label>);
} else {
   //Create textbox id `textbox`
}

$(function() {
    $("#textbox").keypress(function(e) {
        if (e.keyCode == 13) {
        //set innerHTML to a label with text of `textbox`. 
        //Check if button#1 is pressed. If yes, then do something

        //Check if button#2 is pressed. If yes, then do something
        }
    });
 });
});

因此，按钮＃1和按钮＃2 ids正在if中创建，但不在if内部工作，因为它们位于按键内。

我希望这不会让人感到困惑。关于如何使这项工作更好的任何想法？感谢

Answer 1

这是一个基于您的要求的jQuery的工作示例。

我真的不明白这里的用例是什么，并且它引出了一些关于原始文本框重用的问题，是否会在页面上多次出现，为什么你不会＃39;只是立即显示按钮（假设用户知道他们必须按回车键），以及是否可以使用模板更好地解决这个问题？似乎这对于这种简单的交互来说比这更难。

无论如何，我希望这有助于推动你前进。

＆＃13;

(function () {

    function promptForInfo(elem) {
        
        var html = "<div id='newInfoContainer'><label>New info: <input id='newInfo' type='text' placeholder='Please provide info...' /></label></div>";
        $(elem).parent().append(html);  
        
        $("#newInfo")
            .focus()
            .on("keydown", function (e) {
                
                if (e.keyCode === 13) {
                    
                    $(elem).val(this.value);
                    $(this).parent().remove();
                    
                    var buttonsHtml = "<div id='buttonContainer'><input class='saveButton' type='button' value='Save' /><input class='removeButton' type='button' value='Remove' /></div>";
                    $(elem).parent().append(buttonsHtml);
                    $(".saveButton").on("click", function (e) { saveInfo(e); });
                    $(".removeButton").on("click", function (e) { removeInfo(e); });
                    
                }            
        });
    }

    function saveInfo(e) {
        $(e.target.parentElement).remove();
        $("body").append("<p>Saved</p>");
    }
    
    function removeInfo(e) {
        $(e.target.parentElement).remove();
        $("#savedInfo").val("");
        $("body").append("<p>Removed</p>");
    }
    
    function inspectSavedInfo() {
        if (!$("#savedInfo").val()) {
            promptForInfo($("#savedInfo"));
        }
    }
    
    $(document).ready(function () {
        
        // Inspect on any change after init
        $("#savedInfo").on("change", function () { inspectSavedInfo(); });
        
        // Trigger Inspection of savedInfo on init 
        inspectSavedInfo(); 
    });

}());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="savedInfoContainer">
    <label>Saved Info: <input id="savedInfo" type="text" value="" /></label>
</div>

＆＃13;

jQuery事件绑定动态创建的DOM元素

1 个答案: