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

jQuery event binding on dynamically created DOM elements

本文关键字：jQuery 事件 绑定 元素 创建 DOM 动态      更新时间：2023-09-26

很抱歉标题不明确，但我想不出更好的了。

我已经为这个问题挣扎了几天，一直找不到解决它的方法。关于我的代码的一点背景：我有一个文本框savedInfo，它存储来自不同会话的值。因此，如果savedInfo为空，我想让用户使用另一个textbox。一旦用户将信息输入到textbox并按下enter，则textbox的.val()将转到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中不起作用，因为它们在按键中。

我希望这不是太令人困惑。关于如何使这项工作更好，有什么想法吗？感谢

下面是一个根据您的需求使用jQuery的工作示例。

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

不管怎样，我希望这能帮助你前进。

(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(); 
    });
}());
<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>

相关文章：