Bug in jQuery's element creation?

Question

$(document).ready(function(){ var _new_li = $('', { 'id': 'p', 'text': 'CLICKME', click: function(){ alert('fired'); }, data: { 'somedata': 'somedata', } }); ``` _new_li.appendTo($("#example")); }); ``` I receive an "Uncaught TypeError: Cannot read property 'click' of undefined", when I try to click the element which I created like so. But, if you switch click: and data: it works. ``` $(document).ready(function(){ var _new_li = $('<li/>', { 'id': 'p', 'text': 'CLICKME', data: { 'somedata': 'somedata', }, click: function(){ alert('fired'); } }); _new_li.appendTo($("#example")); }); ``` any explanation for that behavior? Kind Regards --Andy PS: I posted a similar behavior earlier in the jQuery Core Development forum, Mr. Swedberg answered there: I'm pretty sure this is happening because you're setting data with an object, which >(until 1.4.2) would overwrite the event object. Not sure which version of jQuery you're >using in your project, but it looked like the jsbin example was using 1…

Accepted Answer

Post rewrited.

You shouldn't put that comma after last (and only) element in data.

After trying some stuff I got to this:

```
$(document).ready(function(){
    var fun=function(){
          alert('fired');
      };
    var parms={
      'id':     'p',
      'text':   'CLICKME',     
      'click':fun,         
      'data':     {
          'somedata':  'somedata'
      }
      };
      console.log(parms);
    var _new_li = $('<li/>',parms);

_new_li.appendTo($("#example"));
});
```

Everything works fine until I click on the li element. Then I get `e is undefined (jquery line 55)`. Works well when click and data are swapped.

Still investigating

AND FOUND IT

jquery development version, line 1919

var events = jQuery.data(this, "events"), handlers = events[ event.type ];

events is undefined.

jquery overwrites events stored in data.

so this IS a bug. It should just extend.

I've submited a bug report.

Bug in jQuery's element creation?

Solution

Problem