1

我试图让暂停按钮分别在每个跨度中工作。每次用户单击“添加”按钮（代码未显示）时，都会将一<span class="emailform">组新元素附加到<div class="email">. 我不知道如何将单击事件处理程序附加到新添加的元素范围中的暂停按钮。我附上了图片，以便您可以看到我正在尝试做的事情。（我错误地使用 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>

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

原创开始（好）

原始状态

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

添加了一个新的跨度

只能先点击暂停（好）

选择暂停第一个跨度

单击以暂停新添加（坏，没有任何反应）

选择暂停新添加

单击第一个跨度中的暂停按钮（坏 - 现在都被选中并暂停）

都选择了

这就是我想要的结果。 当用户点击新添加的 span 中的暂停按钮时，只有这个被暂停，而不是任何其他的。每一个都是分开的。

个人行为

4

2 回答 2

2

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

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

  1. $(".use-email")将包含该类的页面中的所有元素。您想根据单击的按钮隔离单个实例。
  2. trigger()不能用于调用命名函数。建议您查看 jQuery API 并更好地了解如何使用事件和自定义事件。
  3. 建议您更改类而不是更改内联 css。通常代码更少，更容易撤消
  4. $(".pause").removeClass("btn-pause").addClass("btn-pause");- 删除类然后再次添加，没有意义
  5. 您可以委托事件处理程序来处理未来的元素。
  6. 应使用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....'); 
}

演示：http: //jsfiddle.net/vVG3x/3/

于 2013-02-08T01:25:12.783 回答
1

你在这里有几个问题：

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/

于 2013-02-08T01:12:21.583 回答