Can I get usable data in a jQuery live handler for a custom event?
Hello, I've searched for some info on this and posted on StackOverflow
(http://stackoverflow.com/questions/1505673) with no luck so far. I'm
hoping one of you folks can help me out. Thanks in advance.
As I'm sure you are aware, when you trigger an event you can pass
additional array of data like this:
$(this).trigger('custom', ['foo', 'bar' ]);
If you were just using bind, you could absolutely access these
variables. However, if you're using live, it turns out that you have
no access to data as far as I can tell. Am I wrong? Is there another
way?
Here is some demo code to illustrate:
$().ready(function() {
$('button').click(function(){
$('<li>Totally new one</li>').appendTo('ul');
});
$('li').bind('custom', function(e, data) {
// this one works fine for old elements, but not for
new ones
$('#output1').text('Bind custom from #' + e.target.id
+ '; ' + data);
}).live('custom', function(e, data) {
// this one triggers for old and new elements, but
data is useless
$('#output2').text('Live custom from #' + e.target.id
+ '; ' + data);
}).live('click', function(){
$('div').text('');
// just using click count to illustrate passing data
in the trigger
var clicks = $(this).data('clicks');
if(typeof clicks == 'undefined') clicks = 1;
$(this).trigger('custom', ['Times clicked: ' +
clicks ]).data('clicks', clicks + 1);
});
});
Related HTML:
<button>Add</button>
<ul>
<li id="one">First Item</li>
<li id="two">Second Item</li>
<li id="three">Third Item</li>
</ul>
<div id="output1">Result 1</div>
<div id="output2">Result 2</div>