Event handler on multiple events

Question

Possible Duplicate:
Bind multiple events to jQuery 'live' method

I have the following function:

$("td.delivered").click(function() {

        $(this).html($("<input/>", {
          id: 'inp',
          style: 'width:80px;',
          placeholder: "YYYY-MM-DD",
          change: function() {
            selectdone(this, title_id, status_type);
          },
          blur: function() {
            selectdone(this, title_id, status_type);
          },
          onkeypress=="Return": function() { // pseudo-code
            selectdone(this, title_id, status_type);
          }
        })
        );
}

The following works, what would be a better way to write it?

          change: function() {
            selectdone(this, title_id, status_type);
          },
          blur: function() {
            selectdone(this, title_id, status_type);
          },
          onkeypress: function(e) {
            if (e.keyCode == 13) {
            selectdone(this, title_id, status_type);
            }
          }

How would I write this more concisely, making the selectdone function fire on change, blur, and return?

why do you need both blur and change? blur covers a value being changed or not — Ian, Jun 29 '12 at 20:31
@ianpgall Blur would account for if a user clicks on another element, in which case I'd want the function to fire. For example, if you click your user menu in StackOverflow, and then click elsewhere on the page again the user menu will disappear. — David542, Jun 29 '12 at 20:32
oh i understand that, but that means you don't need to bind "change" as well. all "change" is, is when an element is unfocused and the value has changed. "blur" is simply when an element is unfocused. — Ian, Jun 29 '12 at 20:36
no problem. it's not too important, but it can be redundant if you use both blur and change to execute the same thing. — Ian, Jun 29 '12 at 20:54

Blaster · Answer 1 · 2012-06-29T20:50:40.460

2

You can use bind:

  $(this).html($("<input/>", {
      id: 'inp',
      style: 'width:80px;',
      placeholder: "YYYY-MM-DD",
      change: function() {
        selectdone(this, title_id, status_type);
      }
  });

  $(this).bind('blur keypress change', function(e){
     selectdone(this, title_id, status_type);
  });

You may need to modify your code for different events. Notice that to know which event is currently triggered, you would use e.type

edited Jun 29 '12 at 20:50

answered Jun 29 '12 at 20:29

Blaster

9,414
1
29
25

this doesn't account for the pseudo 'Return' function – Max Hudson Jun 29 '12 at 20:30
2

it does, but not so easily. you have to check the event type, and then see if it is "keypress" or whatever, then check the event's keycode for "13" as that is the return button's keycode. – Ian Jun 29 '12 at 20:32

Max Hudson · Accepted Answer · 2012-06-29T22:16:02.110

1

$(this).html($("<input/>", {
      id: 'inp',
      style: 'width:80px;',
      placeholder: "YYYY-MM-DD"
  });

$('input', this).bind('change blur keypress', function(e) {
    if(e.type != 'keypress' || e.keyCode == 13){
        selectdone(this, title_id, status_type);
    }
});

edited Jun 29 '12 at 22:16

answered Jun 29 '12 at 20:29

Max Hudson

9,961
14
57
107

this doesn't account for the pseudo 'Return' function – Blaster Jun 29 '12 at 20:31
@maxhud thank you, could you please write the complete function and I will accept your answer – David542 Jun 29 '12 at 20:36
here it is. this should work just fine – Max Hudson Jun 29 '12 at 20:38
@maxhud: hmm, so this actually does not work. It will DELETE a row if it's value is None instead of keeping the value (whereas the above function that I included does this correctly). I don't know enough about js to know why, but the action in your function is not the exact same as the one I've provided above. – David542 Jun 29 '12 at 20:41
Try that. I accidentally applied the function to the container of the inputs instead of each input. Now 'this' inside the bind function, will be any input inside the container rather than the container – Max Hudson Jun 29 '12 at 22:17

Event handler on multiple events

2 Answers2