Javascript 单击后，我的单击事件与on方法不起作用

它几乎不起作用，它第一次起作用，但不是下一次

$('.edit').on('click', itemClick);

itemClick是我的自定义函数

---

您似乎在向页面动态添加元素

尝试委派活动。

替换

$('.edit').on('click', itemClick);

与

代码

$(document).ready(function () {
    // Event when clicked on li
    $(document).on('click', 'li', function () {
        $('li').removeClass('active');
        $(this).addClass('active');
    });

    // Delegate the .edit event
    $(document).on('click', '.edit', itemClick);
    // Delegate the input event
    $(document).on('blur', 'input', editInputBlur);

    function itemClick(e) {
        // Stop the propagation when you click on edit
        e.stopPropagation();
        var $this = $(this),
            // Find the closest li
            $li = $this.closest('li'),
            // Get the text
            txt = $li.find('.items').text();
        // Add and remove class for li
        $li.addClass('active').siblings().removeClass('active');
        // Empty the li
        $li.empty();
        // Create input and append it to $li
        var $input = $("<input type='text' maxlength='30'/>").val(txt);

        $input.appendTo($li).focus();
    }


    function editInputBlur(e) {
        // You can use $(this) here directly as that is the event target
        var $this = $(this),
            v = $this.val(); // new edited value

        if (v.trim() !== "") {
            var html = '';
            html += "<a href='#'><span class='items'>" + v + "</span></a>";
            html += "<a href='#'><span class='edit'>edit</span></a>";
            var $a = $(html);
            // Use closest so that it does not break if any
            // extra container is added later
            $this.closest('li').append($a);
            $this.remove();
        }
    }

});

$（文档）.ready（函数（）{
//单击li时发生的事件
$（文档）。在（'click'，'li'，函数（）{
$（'li'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
//委派.edit事件
$（文档）。在（'单击'，'编辑'，项目单击）上；
//委派输入事件
$（文档）.on（'blur'，'input'，'editInputBlur）；
函数项单击（e）{
//单击“编辑”时停止传播
e、 停止传播（）；
变量$this=$（this），
//找到最近的李
$li=$this.closest（'li'），
//获取文本
txt=$li.find（'.items'）.text（）；
//添加和删除li的类
$li.addClass（'active'）.sides（）.removeClass（'active'）；
//清空李
$li.empty（）；
//创建输入并将其附加到$li
var$input=$（“”）.val（txt）；
$input.appendTo（$li.focus（）；
}
函数editInputBlur（e）{
//您可以在此处直接使用$（this），因为它是事件目标
变量$this=$（this），
v=$this.val（）；//新编辑的值
如果（v.trim（）！=“”）{
var html=''；
html+=“”；
html+=“”；
var$a=$（html）；
//使用“最近的”，以使其在有损坏时不会损坏
//稍后会添加额外的容器
$this.closest（'li'）。追加（$a）；
$this.remove（）；
}
}
});

---

请在此处发布相关代码，而不仅仅指向JSFIDLE。如果JSFIDLE死了怎么办？试着对这个//input.keydown（inputKeydown）进行注释；在这个itemClick函数中，虽然我同意inputKeydown没有定义并抛出错误，但这不是问题所在。正如@Sushanth所指出的，对象被动态地重新添加，而无需重新绑定，因此您必须委派事件；除此之外，只需清除文本，然后重新添加文本，而不是删除和重新添加需要新事件的DOM元素！谢谢但它仍然像一个bug，因为它似乎需要2次点击而不是1次，它需要点击“li”然后点击链接。。有什么想法吗？这是因为这个条件

var$this=$（e.target）.closest（'li.active'）仅当
li
具有活动类时才进行选择。因此，只有在单击
li
first right时，条件才满足。我删除了类“active”，它现在工作得很好！谢谢@努鲁里亚。。检查更新的帖子和提琴。。委派活动总是一个更好的主意。同时将模糊事件移到外部
$(document).ready(function () {
    // Event when clicked on li
    $(document).on('click', 'li', function () {
        $('li').removeClass('active');
        $(this).addClass('active');
    });

    // Delegate the .edit event
    $(document).on('click', '.edit', itemClick);
    // Delegate the input event
    $(document).on('blur', 'input', editInputBlur);

    function itemClick(e) {
        // Stop the propagation when you click on edit
        e.stopPropagation();
        var $this = $(this),
            // Find the closest li
            $li = $this.closest('li'),
            // Get the text
            txt = $li.find('.items').text();
        // Add and remove class for li
        $li.addClass('active').siblings().removeClass('active');
        // Empty the li
        $li.empty();
        // Create input and append it to $li
        var $input = $("<input type='text' maxlength='30'/>").val(txt);

        $input.appendTo($li).focus();
    }


    function editInputBlur(e) {
        // You can use $(this) here directly as that is the event target
        var $this = $(this),
            v = $this.val(); // new edited value

        if (v.trim() !== "") {
            var html = '';
            html += "<a href='#'><span class='items'>" + v + "</span></a>";
            html += "<a href='#'><span class='edit'>edit</span></a>";
            var $a = $(html);
            // Use closest so that it does not break if any
            // extra container is added later
            $this.closest('li').append($a);
            $this.remove();
        }
    }

});