backbone.js：渲染后将焦点设置为输入

发布于 2024-12-25 20:44:14 字数 779 浏览 1 评论 0原文

我有一个有 1 个输入的模型。另外，我有一个收藏。现在，当我将模型添加到集合中时，我想将焦点设置为其输入。准确地说，我需要将焦点设置在新创建的模型视图的输入上。

但是，我似乎无法让它发挥作用。这是我将模型视图添加到集合视图的函数：

addOne: function(InvoiceItem) {
    var view = new InvoiceItemView({model: InvoiceItem});
    this.$('tr[data-id="'+InvoiceItem.get('after')+'"]').after(view.render().el);
    this.$('tr[data-id="'+InvoiceItem.cid+'"]').css('background', 'green');
    this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus();
},

问题是，第三次调用： this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus( ); 不执行任何操作。这很奇怪，因为我似乎只能对根元素 tr 进行 DOM 操作，除此之外什么也做不了。

在我看来，jQuery 不知道该元素存在，这很奇怪，因为当我执行 alert(this.$('tr[data-id="'+InvoiceItem.cid+'"] input' ).length) 我得到1，这表明该元素存在。

我在这里做错了什么？

原文

I have a Model that has 1 input. Also, I have a Collection. Now, when I add a model to the collection, I want to set the focus to it's input.
To be precise, I need to set the focus on the newly created model view's input.

However, I can't seem to get it to work. Here's my function that adds the model's view to the collection view:

addOne: function(InvoiceItem) {
    var view = new InvoiceItemView({model: InvoiceItem});
    this.$('tr[data-id="'+InvoiceItem.get('after')+'"]').after(view.render().el);
    this.$('tr[data-id="'+InvoiceItem.cid+'"]').css('background', 'green');
    this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus();
},

The problem is, the third call: this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus(); does not do anything. And it's weird, because it seems that I can only do DOM manipulation on the root element tr, and on nothing else besides that.

It seems to me that jQuery doesn't know that the element exists, which is weird, because when I do alert(this.$('tr[data-id="'+InvoiceItem.cid+'"] input').length) I get 1, which indicates that the element exists.

What it is that I am doing wrong here?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

年华零落成诗 2025-01-01 20:44:14

使用 _.defer 解决了我的问题：

var $this = this;
_.defer(function(){
  $this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus();
});

Using _.defer fixed my problem:

var $this = this;
_.defer(function(){
  $this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus();
});

回复收藏 0 原文

临走之时 2025-01-01 20:44:14

而不是 this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus();

尝试这个

$(view.render().el).find('input').focus();

Instead of this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus();

try this

$(view.render().el).find('input').focus();

回复收藏 0 原文

北城挽邺 2025-01-01 20:44:14

我遇到了与您的问题非常相似的问题，并在寻找解决方案时最终来到这里。您的帖子是几个月前的，所以您可能已经超越了这个，但希望这对其他人有帮助。我能够使用 jQuery 的 ready 函数处理程序解决问题。我一直认为它只能在 document 上使用，但你也可以在子节点上使用它。试试这个：

addOne: function(InvoiceItem) {
  var view = new InvoiceItemView({model: InvoiceItem});
  $('tr[data-id="'+InvoiceItem.get('after')+'"]').ready(function(){
    $('tr[data-id="'+InvoiceItem.cid+'"]').css('background', 'green');
    $('tr[data-id="'+InvoiceItem.cid+'"] input').focus();
  });
  $('tr[data-id="'+InvoiceItem.get('after')+'"]').after(view.render().el);

I had a problem very similar to yours and ended up here while searching for a solution. Your post was a few months ago so you probably have moved past this, but hopefully this will help someone else. I was able to solve the problem using jQuery's ready function handler. I always thought it could only be used on the document but you can use it on subnodes as well. Try this:

addOne: function(InvoiceItem) {
  var view = new InvoiceItemView({model: InvoiceItem});
  $('tr[data-id="'+InvoiceItem.get('after')+'"]').ready(function(){
    $('tr[data-id="'+InvoiceItem.cid+'"]').css('background', 'green');
    $('tr[data-id="'+InvoiceItem.cid+'"] input').focus();
  });
  $('tr[data-id="'+InvoiceItem.get('after')+'"]').after(view.render().el);

回复收藏 0 原文

~没有更多了~