仅在一篇文章中启用 jquery 按钮答案

【问题标题】：jquery button enabling just in one post仅在一篇文章中启用 jquery 按钮
【发布时间】：2013-07-11 18:27:25
【问题描述】：

我有一系列帖子。每个帖子都有一个textarea（输入文本）和一个取消和提交按钮。最初提交按钮被禁用，直到写入一些文本。

尽管如此，当我第一次在 textarea 中输入一些文本时，所有提交 button 的帖子都会启用，而不仅仅是帖子中输入的那个。

我的 JavaScript 代码：

  $('.small-textarea').click(function() {

        $('.btn-info').attr('disabled','disabled');
        $(this).addClass("set-large");
        $('.set-large').keyup(function() {
            var $this = $('.set-large');
            if($(this).val() == '') {
               $('.btn-info').attr('disabled','disabled');
            }
            else {
              $('.btn-info').removeAttr('disabled');
            }
        });

  });

HTML：

<div id="footer-condensed-replies" class="footer-condensed">
    <!--<input class="input-xlarge" type="text" placeholder="Reply to @Gerardo">-->
    <textarea class="small-textarea" type="text" placeholder="Reply to @Gerardo"></textarea>
    <div id="" class="footer">
        <div id="" class="footer-submit-button">
            <button type="button" id="cancel" class="btn" data-value="Cancel">Cancel</button>   <span id="footer-btn-margin"></span>

            <button id="hunch" class="btn btn-info" type="button" data-value="Submit">Submit</button>
        </div>
    </div>
</div>

【问题讨论】：

显示一些 HTML，您将不得不使用 this 的实例来获得最近的提交按钮，但如果没有 HTML，我们将无能为力。
也要显示您的标记...您的选择器是问题所在，您需要使其相对。
footer-condensed 是否重复。我已经添加了一个答案检查一下。假设该部分是重复的部分。

标签： javascript jquery button textarea

【解决方案1】：

没有看到您的标记，这是一种方法：

如果你的标记是这样的：

<input type="text" class="small-textarea" />
<input type="button" class="btn-info" value="Submit" />
<br/>
<input type="text" class="small-textarea" />
<input type="button" class="btn-info" value="Submit" />
<br/>
<input type="text" class="small-textarea" />
<input type="button" class="btn-info" value="Submit" />

您可以这样做：由于该按钮位于文本框旁边，您将使用.next() 仅选择和定位该按钮而不是全部。

$('.small-textarea').click(function () {
    $(this).addClass("set-large").next('.btn-info').prop('disabled', true);
});

$(document).on('keyup', '.set-large', function () { // Use another container that holds these elements in instead of document
    $(this).next('.btn-info').prop('disabled', $(this).val() == '');
});

使用prop 而不是attr
不要在没有解除绑定的情况下在另一个事件中注册 click 事件，它最终会为您的元素创建重复的 keyup 处理程序。您可以使用事件委托，而不是使用 .on() 1.7+ 或 .live() 旧版本。
使用相对目标而不是选择可以选择所有目标的类名。

更新

使用您的标记，您可以这样做：

$('.small-textarea').click(function () {
    $(this).addClass("set-large").next().find('.btn-info').prop('disabled', $(this).val() == '');
});
$(document).on('keyup', '.set-large', function () {
    var $this = $(this);
    $(this).next().find('.btn-info').prop('disabled', $(this).val() == '');
});

Demo

【讨论】：

@crowdfun cool.... 元素 footer-condensed 是否一直存在？如果是这样的话$('.footer-condensed').on('keyup', '.set-large', function () {
嘿，烟花太早了：\ 我试用了你的演示，它可以工作。当我在我的测试中，它适用于第一篇文章。当我在第二篇文章 textarea 上写东西时，它不会启用提交按钮，也不会在以下帖子中启用。你能帮忙吗？
您的第二个帖子.small-textarea 是动态添加的吗？ '.footer-condensed' 部分也是动态添加的吗？尝试做$(document).on('click','.small-textarea',function(){...
刚刚更改为 .footer-condensed 并且现在可以使用所有内容。谢谢大佬
最后一个问题：为什么要使用 $(document) 而不是简单的选择器？

【解决方案2】：

使用 prop() 代替 attr().... 和 $(this).parent().find('.btn-info') 来获取提交按钮

试试这个

$('.small-textarea').click(function() {

    $('.btn-info').prop('disabled',true);
    $(this).addClass("set-large");
 });

$('.set-large').keyup(function() {
        if($(this).val() == '') {
           $(this).parent().find('.btn-info').prop('disabled',true);
        }
        else {
          $(this).parent().find('.btn-info').prop('disabled',false);
        }
    });

【讨论】：