Question

我现在有这个代码：

$(document).ready(function () {

$("div#main-edit").click( function() {
var cursorExists = $("input#cursor").length;
if (cursorExists == false){
   $("div#cursor-start").append("<input type='text' id = 'cursor' />");
   $("input#cursor").focus();
  }

});


  $("input#cursor").keydown(function() {
  $("div#cursor-start").enterText();
});

jQuery.fn.enterText = function(){
    alert("hello");
};

});

但是在这种情况下不会调用函数enterText。似乎修复应该很容易。是因为当文档加载时，jquery没有找到任何选择（输入＃cursor）？

Answer 1

一些事情：

检查int（.length）是否为false并不是很有意义，即使JS允许你这样做。它应该是$("input#cursor").length == 0)

你是否只在keydown函数中尝试了alert('hello')，只是为了确保它有效？那么alert($("div#cursor-start").length)呢。如果那个是0那么你的选择器就不好了。

在发现问题之前，将脚本简化为裸骨。它很可能是一个糟糕的选择器。

Answer 2

我认为这段代码存在问题，因为你正在调用它;

$("input#cursor").keydown(function() {
  $("div#cursor-start").enterText();
});

在您的代码创建对象input#cursor之前

。因此，它将找不到该对象，并且无法为其安装事件处理程序。我建议您将代码更改为仅在创建对象后安装事件处理程序：

$(document).ready(function () {

    $("div#main-edit").click( function() {
        var cursorExists = $("input#cursor").length;
        if (cursorExists == false) {
            $("div#cursor-start").append("<input type='text' id = 'cursor' />");
            $("input#cursor").focus();
            // install event handler, now that we know the object exists
            $("input#cursor").keydown(function() {
                $("div#cursor-start").enterText();
            });
        }
    });

    jQuery.fn.enterText = function(){
        alert("hello");
    };
});

替代方法是使用.live("keydown", function() {})而不是.keydown()，它允许您在对象存在之前安装一些事件处理程序（您可以阅读jQuery doc以进一步了解）。

仅供参考，当您使用诸如“input＃cursor”之类的选择器而不仅仅是“#cursor”时，您在jQuery中的性能会更差。后者经过优化，可以使用document.getElementById（）。前者没有并且需要更长的代码路径。由于页面中只有一个对象具有任何给定的ID，因此没有理由使用标签类型对其进行质量调整。只需使用“#main-edit”，而不是“div＃main-edit”。

keydown函数未在jquery中启用警报功能

2 个答案: