代码之家  ›  专栏  ›  技术社区  ›  Ergec

在JQuery中动态创建textbox按钮和分配click函数

  •  1
  • Ergec  · 技术社区  · 15 年前

    我有以下代码为页面上的每个texbox创建两个按钮(一个在左边,一个在右边)。其思想是创建一个递增/递减文本框。代码在一个文本框上运行良好,但在每个按钮上增加/减少两个或更多个文本框。

    你知道如何快速创建按钮并将其附加到文本框中进行递增/递减吗?

    jQuery.fn.incrementer =  function() {
        this.val(0);
        this.before("<input class='incrementer_minus' type='button' value=' - '/>");        
        var myobj = this;
        $(".incrementer_minus").live('click', function(){
            $(myobj).val(parseInt(JQ(myobj).val()) - 1);
        });
        this.after("<input class='incrementer_plus' type='button' value=' + '/>");
        $(".incrementer_plus").live('click', function(){
            $(myobj).val(parseInt(JQ(myobj).val()) + 1);
        });
    }
    
    JQ("#increment").incrementer();
    JQ("#increment2").incrementer();
    
    3 回复  |  直到 15 年前
        1
  •  1
  •   user113716    15 年前

    您正在将单击事件与 实例 incrementer_minus incrementer_plus 当您这样做时:

    $(".incrementer_plus").live('click'...
    

    相反,您只需将事件附加到刚刚创建的特定事件。

    bind 而不是 live ,因为你不需要 居住 .

    我也变了 JQ jQuery 为了我的方便。你可以把它改回去。

    试一试: http://jsfiddle.net/mAsr9/

    jQuery.fn.incrementer =  function() {
        var myobj = this;
        this.val(0);
    
          // Create new element, and insert before 'this'
        jQuery("<input class='incrementer_minus' type='button' value=' - '/>").insertBefore(this)
    
               // Then bind the click event to that new element
            .bind('click', function(){
                $(myobj).val(parseInt(jQuery(myobj).val()) - 1);
            });
    
          // Create new element, and insert after 'this'
        jQuery("<input class='incrementer_plus' type='button' value=' + '/>").insertAfter(this)
    
              // Then bind the click event to that new element
            .bind('click', function(){
                $(myobj).val(parseInt(jQuery(myobj).val()) + 1);
            });
    }
    
    $(function() {
        jQuery("#increment").incrementer();
        jQuery("#increment2").incrementer();
    });
    
        3
  •  0
  •   Sean O    15 年前

    看看jQuery增量插件: http://sean-o.com/increment

    我创建它就是为了这样一个用途,希望它(仍然?)能对你有所帮助。