Question

所以我尝试使用链接点击向div添加按钮，然后可以点击这些按钮删除它们并重新启用原始链接再次点击，这样您就可以添加和删除无限次数。我主要使用它，但在尝试重新启用点击功能后，我会遇到奇怪的行为。

1）您需要单击链接两次以重新附加按钮和

2）有时我现在在div中获得附加按钮的多个实例。

这是我的代码：

var selections = ' ';
    function add_Button() {
      jQuery(".form-unselected").click(function (e) {
        jQuery(this).removeClass('form-unselected').addClass('selected').off('click');
        var title = jQuery(this).attr("title");
        var id = jQuery(this).attr("href");
        selections += title + ', ';
        var button_content = jQuery('<button class="content-button">').html(title).attr("title", title).attr("id",id);
        event.preventDefault();
        $( "#selected-items" ).append(button_content);
        console.log(selections);
      });
    }
    add_Button();
    jQuery(document).on('click','.content-button', function(e){
      var removed_content = jQuery(this).attr("title") + ', ';
      selections =  selections.replace(removed_content,'');
      var href = jQuery(this).attr("id");
      jQuery(".add-to-form[href='"+ href +"']").addClass('form-unselected').removeClass('selected').on('click', add_Button );
      jQuery(this).remove();
      console.log(selections);
    });

选择变量是用于其他目的的逗号分隔的值列表，但我也在那里获得重复项。提前谢谢！

Answer 1

您不应动态添加和删除点击处理程序。最初将点击处理程序添加到所有按钮。然后单击时，您可以查询状态并决定。

还有一个未知的引用event与参数e不匹配。

而且，重复jQuery(this)是昂贵的。将此值存储在局部变量中并改为引用它。下面的代码演示了所有更改。

var selections = ' ';
      jQuery(".form-unselected").click(function (e) {
        var $this = jQuery(this);
        if ($this.hasClass("selected")) {
          return;
        }
        $this.removeClass('form-unselected').addClass('selected');
        var title = $this.attr("title");
        var id = $this.attr("href");
        selections += title + ', ';
        var button_content = jQuery('<button class="content-button">').html(title).attr("title", title).attr("id",id);
        e.preventDefault();
        $("#selected-items").append(button_content);
        console.log(selections);
      });
    jQuery(document).on('click','.content-button', function(e) {
      var $this = jQuery(this);
      var removed_content = $this.attr("title") + ', ';
      selections =  selections.replace(removed_content,'');
      var href = $this.attr("id");
      jQuery(".add-to-form[href='"+ href +"']").addClass('form-unselected').removeClass('selected');
      $this.remove();
      console.log(selections);
    });

打开/关闭点击和jQuery的奇怪行为？

1 个答案: