Question

我试图让暂停按钮分别在每个范围内工作。每次用户点击“添加”按钮（代码未显示）时，这些元素的新<span class="emailform">组都会附加到<div class="email">。我不知道如何将click事件处理程序附加到新添加的元素范围中的暂停按钮。我附加了图像，以便您可以看到我正在尝试做的事情。（我大量使用trigger（）错误，试图调用我自己的函数。）

我还添加了fiddle here。

感谢您的帮助！

HTML：

<div class="email">
     <span class="emailform">
              <label for="vs-email" class="use-email" >Via email:</label>
              <input type="text" class="text-input" />
              <input type="button" class="pause" />
              <input type="button" class="remove"  value="remove" />
      </span>
</div>

jQuery的：

$(".pause").on('click', function(e){
     $(e.target).closest("span").trigger(pauseRestore());   
});

function pauseRestore(){
     var oddClick = $(this).data("oddClick");
     $(this).data("oddClick", !oddClick);
     if(!oddClick) {
          pauseAction(); 
     }else {
          restoreAction();
     }
}

原始开始（好）

originalstate

点击“添加”按钮（好）

后添加了另一个

added a new span

点击暂停优先（好）

select to pause first span

点击暂停新添加的（BAD，没有任何反应）

select to pause new added

点击第一个范围内的暂停按钮（BAD - 现在都已选中并暂停）

both selected

这是我想要的结果。 当用户点击暂停按钮时新添加的范围，仅暂停，没有其他人。每一个都是独立的。

individual behavior

Answer 1

您的方法存在许多问题，使您过于复杂。

我会先尝试逐条列出问题：

$(".use-email")将包含该类的页面中的所有元素。您希望根据单击的按钮隔离单个实例。
trigger()不能用于调用命名函数。建议您查看jQuery API并更好地了解如何使用事件和自定义事件。
建议您更改类而不是更改内联css。通常是更少的代码，更容易撤消
$(".pause").removeClass("btn-pause").addClass("btn-pause"); - 删除课程然后再添加，没有意义
您可以将事件处理程序委派给未来的元素。
应使用prop()方法而非attr()来更改disabled

以下是我认为你需要的并且显着减少代码：

$(".add").click(function(){
        addItem();
    });
/* delegate handler for future elements*/
$(document).on('click','.pause', function(e){      
    /* using "this" to isolate instance*/
    var $pauseButton=$(this);
    var $emailForm=$pauseButton.closest('.emailform').toggleClass('paused');

   /* clear other paused elements*/
    $('.emailform.paused').not($emailForm)
                          .removeClass('paused')
                          .find( ".text-input").prop("disabled", false) ; 

    var isPaused=$emailForm.hasClass('paused');
    /* use "find()" to look within instance only*/
    $emailForm.find(".text-input").prop("disabled", isPaused);  

});

function addItem(){
   $('div.email').append('html string....'); 
}

DEMO：http://jsfiddle.net/vVG3x/3/

Answer 2

你在这里遇到的问题很少：

1）trigger()用于执行事件处理函数（例如'click'），而不是调用任意函数。如果要调用函数并传递对象，只需使用函数定义中的参数调用该函数：

$(".pause").on('click', function (e) {
    myspan = $(e.target).closest("span");
    pauseRestore(myspan);
});

...

function pauseRestore(myspan) {
    var oddClick = myspan.data("oddClick");
    myspan.data("oddClick", !oddClick);
    ...
}

2）您使用.on的方式仅适用于您致电.pause时存在的.on项。要应用所有以后的.pause项实例，必须将处理程序附加到父对象，并过滤所需的选择器：

$(".email").on('click', '.pause', function (e) {
    ....
}

3）同样，您使用所有 .use-email项目的选择器，而不是您关注的范围中的项目，因此您要修改所有项目：

$(".use-email").css("color", "#b1b1b1");

相反，您需要以下内容，其中myspan包含span对象：

myspan.find(".use-email").css("color", "#b1b1b1");

总而言之，你得到了这个小提琴：

http://jsfiddle.net/umukT/

在附加元素中查找目标以调用click事件

2 个答案: