Jquery 在附加元素中查找要调用单击事件的目标

我试图让暂停按钮在每个跨度中分别工作。每次用户单击“添加”按钮（代码未显示），这些元素的一组新的

将附加到

中。我不知道如何在新添加的元素范围中将click事件处理程序附加到pause按钮。我附上了一些图片，这样你就可以看到我在做什么。（我经常错误地使用trigger（）并试图调用自己的函数。）

我还包括了一个

谢谢你的帮助

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>

$(".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();
     }
}

原始启动（良好）

单击“添加”按钮后添加另一个按钮（好）

单击仅暂停第一次（好）

单击以暂停新添加的（不好，什么也没有发生）

单击第一个span中的暂停按钮（错误-现在两个按钮都被选中并暂停）

这是我想要的结果。 当用户单击中的“暂停”按钮时 新的增加了跨度，只是暂停了， 没有其他人。每一个都是独立的

---

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

1）

trigger（）

用于执行事件处理程序函数（例如“单击”），而不是调用任意函数。如果要调用函数并传递对象，只需使用函数定义中的参数调用函数：

$(".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

的方式仅适用于调用

.on

时存在的

.pause

项目。要应用于

.pause

项的所有未来实例，必须将处理程序附加到父对象，并在所需的选择器上进行筛选：

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

3） 同样，您正在为所有

使用选择器。使用电子邮件
项目，而不是您关心的范围中的项目，因此您正在修改所有项目：

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

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

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

把它们放在一起，你会得到一把小提琴：

您的方法存在许多问题，您将这些问题变得过于复杂

我将首先尝试逐项列出问题：

$（“.use email”）
将包含该类页面中的所有元素。您希望根据单击的按钮隔离单个实例
trigger（）
不能用于调用命名函数。建议您查看jQueryAPI，更好地了解如何用于事件和自定义事件
建议您更改类而不是更改内联css。通常代码更少，更容易撤销
$（.pause”）.removeClass（“btn pause”）.addClass（“btn pause”）-删除类，然后再次添加，没有意义

您可以委托事件处理程序来考虑将来的元素
应该使用
prop（）
方法not
attr（）
来更改属性，如
禁用
以下是我认为您需要的，并大大减少了代码：

$(".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....'); 
}

演示：
+1谢谢你，charlietfl解释了我的错误，并用另一种方式写了这篇文章！你的代码被简化了，注释真的很有用。API中有许多方法，虽然我通读了它们，但并不总是清楚如何以正确的语法将它们与其他方法结合起来……至少对我来说不总是这样。+1谢谢你，Jeff B。我将此标记为答案，因为你修改了编写的代码。这有助于理解如何在不重新编写的情况下进行更正。我希望我能标出两个答案，因为这两个答案都解决了我的问题，并且对我帮助很大。杰夫B，你新添加的跨度元素是如何正确对齐的？我不能使我的正确对齐。我注意到在Charlietfl的小提琴中，对齐结果和我的一样。我已经考虑过使用firebug，但仍然无法解决这个问题。谢谢@Chris22，您的第一个跨距被硬编码到页面中，额外的跨距由JS添加，JS使用与第一个跨距不同的HTML。我只是让硬编码的HTML和JS生成的HTML匹配。另一种解决方法是使用一个隐藏的跨度作为模板，并在添加跨度时克隆它。那样的话，如果你修改了一些东西，你只需要修改一次@杰夫B，谢谢你回答并提供小提琴。我查看了
DOM
中的firebug，你是对的，我看到新添加的
span
有一个index.html的上下文（[），而不是我附加到的div，因此样式被关闭了。我将按照你的建议使用
.clone（）
方法。这是一个“如何”的好例子！