Bug in jQuery's element creation ?

Question

Hi Folks,

$(document).ready(function(){
    var _new_li     = $('<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.4. Try upgrading >to 1.4.2 and see if that helps.

But it seems like the problem still exists in 1.4.2

Answer 1

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.

Answer 2

I ended up modifying the source code slightly, so it would not randomly blow up here.

handle: function( event ) {
...

// tbn modified source
try {
   var events = jQuery.data(this, "events"), handlers = events[ event.type ];
} catch(e) {}
// tbn modified source

..then re-minified the source

I have not had any problems with this since (yet).