1

我在绑定到 textarea 控件的 keyup 事件时遇到了一些问题。我正在尝试以下

var shortDescInput = $('nobr:contains("Short Description")').closest('tr').find($('textarea[title="Short Description"]'));

    // this doesn't work
    shortDescInput.bind('keyup', function () {
        countShortDescChars();
    });

    // Nor this
    shortDescInput.keyup(function () {
        countShortDescChars();
    });

我在这里遗漏了一些非常明显的东西吗？这适用于其他控件，例如将事件绑定到单选按钮。我已经检查过了，我挑衅地选择了正确的文本区域

var shortDescInput = $('nobr:contains("Short Description")').closest('tr').find($('textarea[title="Short Description"]'));

我只是似乎从来没有得到 keyup 事件....

4

4 回答 4

1

find($('textarea[title="Short Description"]'))是非常低效的。出于您的目的，find应该将选择器作为参数。

当您将 jQuery 对象传递给 时find，jQuery 首先从顶部查询 DOM 并找到与该选择器匹配的所有元素。然后，find遍历所有这些结果，直到找到与指定父项匹配的结果。

相反，您应该使用：

find('textarea[title="Short Description"]')

另外，使用.on代替.bind. .bind由于效率低下，将在未来的版本中弃用。

shortDescInput.on("keyup", countShortDescChars);

以及修改后的代码：

$(function () {
    var shortDescInput = $('nobr:contains("Short Description")').closest('tr').find('textarea[title="Short Description"]');

    shortDescInput.on("keyup", countShortDescChars);
});
于 2012-08-14T13:08:48.723 回答
0

要验证选择器是否正常工作，请使用带有 console.log() 或老式 alert() 的.length ：

var shortDescInput = $('nobr:contains("Short Description")').closest('tr').find('textarea[title="Short Description"]');

alert(shortDescInput.length);

您还可以逐步确定不返回任何内容的人：

alert($('nobr:contains("Short Description")').length);
alert($('nobr:contains("Short Description")').closest('tr').length);
alert($('nobr:contains("Short Description")').closest('tr').find('textarea[title="Short Description"]').length);

第二次尝试。使用 .on() 而不是 .bind()：

shortDescInput.on('keyup',function(){countShortDescChars();});
于 2012-08-14T13:11:41.670 回答
0

所以我和你的小提琴一起演奏...... 你的选择器有问题。

  • 首先，我从 js 部分中删除脚本标签。
  • 然后删除 html 中的脚本标记，因为它破坏了小提琴。
  • 切换到 jQuery 1.8.0 导致 MooTools 不是我们想要的。
  • shortDescInput = $('textarea');在您的巨型选择器之后添加，事件被触发！
  • 在您的函数中再次添加shortDescInput = $('textarea');以使计数器工作。

再说一次，让我们现在试着弄清楚为什么你的选择器不工作:-)

编辑：

找到了！

我用 .parent().next() 替换了你的 .closest()因为我有点认为 .closest() 是针对 parent 的。

var shortDescInput = $('nobr:contains("Short Description")').parent().next().find('textarea[title="Short Description"]');
于 2012-08-14T14:14:52.747 回答
0

问题是，至少在小提琴中，<tr>不在 a 中<table>，所以它被浏览器从 DOM 中删除了。包裹<tr>在一个<table>使小提琴工作。
演示：http: //jsfiddle.net/kNkXE/9/

于 2012-08-14T14:22:12.933 回答