Finding target in appended elements to invoke click event

Question

I am trying to get the pause button to work in each span separately. Each time the user clicks the "add" button (code not shown), a new <span class="emailform">set of these elements is appended to the <div class="email">. I don't know how to attach the click event handler to the pause button in the newly added span of elements. I have attached images so that you can see what I'm trying to do. (I'm prolly using trigger() wrong as well trying to call my own function.)

I've also included a fiddle here.

Thanks for your help!

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

Original start (good)

Another added after clicking 'add' button (good)

Click to pause first only (good)

Click to pause new added (BAD, nothing happens)

Click pause button in first span (BAD -- both are now selected and paused)

This is the result I want. When user clicks on the pause button in the new added span, only this is paused, not any others. Each one is separate.

Answer 1

There are numerous problems with your approach which you are making overly complicated.

I'll try to itemize issues first:

1. $(".use-email") will include all elements in page with that class. You want to isolate the individual instance based on button clicked.
2. trigger() can not be used for calling named functions. Suggest you review jQuery API and get better understanding of how to use for events and custom events.
3. Suggest you change classes rather than changing inline css. Is usually less code and far easier to undo
4. $(".pause").removeClass("btn-pause").addClass("btn-pause"); - removes the class then adds it again, makes no sense
5. You can delegate event handlers to account for future elements.
6. SHould use prop() method not attr() to change properties like disabled

Following does what I think you need and reduces code significantly:

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

You have few issues here:

1) trigger() is used to execute event handler functions (such as 'click'), not call arbitrary functions. If you want to call a function and pass along the object, just call the function with a parameter in the function definition:

$(".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) The way you are using .on only applies to .pause items that exist at the time you call .on. To apply to all future instances of .pause items, you must attach the handler to a parent object, and filter on the selector you want:

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

3) Similarly, you are using selectors for all .use-email items, instead of the one in the span you care about, so you are modifying all items:

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

Instead, you need the following, where myspan contains the span object:

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

Putting it all together you get this fiddle:

http://jsfiddle.net/umukT/