Databases
StackOverflow2013
Postsdbo
PODelegate attach on a non event
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODelegate attach on a non event
    text
    copied!<p>I have some javascript applying changes to some elements and a function loading more of such elements. Like that:</p> <pre><code>&lt;ol id="test"&gt;&lt;li&gt;click&lt;/li&gt;&lt;/ol&gt; &lt;script type="text/javascript"&gt; $(function() { $('OL').delegate("li","click",function(){ $('#test').append('&lt;li&gt;click&lt;/li&gt;'); }); &lt;/script&gt; </code></pre> <p>This is the basic functionality of delegate and it works. I can click on multiple <code>&lt;li&gt;</code> elements.</p> <p>The problem is that i want to, <strong>additonaly</strong> do the following:</p> <pre><code>$(function() { $('li').css('color','red'); //this is just an example, I don't need to paint the text red :) }); </code></pre> <p>for all <code>li</code> not just the ones that are loaded at the page load.</p> <p>I haven't been able to attach those changes to anything (there is no event that indicates that I have loaded the elements in the append above). Also I know I could recall <code>$('li').css('color','red');</code> every time I call the append (or on ajax callbacks which are the thing I'm really working). But I have a system with a lot of ajax calls that return different HTMLs and a lot of pluggins and jquery staff that needs to be executed against this elements. I don't want to do a giant "refresh" function to be called on every ajax success.</p> <p>Right now the only solution I find is to bind everything to an arbitrary event and do a trigger call for that event on every ajax load like that:</p> <pre><code>&lt;ol id="test"&gt;&lt;li&gt;click&lt;/li&gt;&lt;/ol&gt; &lt;script type="text/javascript"&gt; $(function() { $('OL').delegate("li","click",function(){ $('#test').append('&lt;li&gt;click&lt;/li&gt;'); $('#test').children().trigger('load'); }); &lt;/script&gt; &lt;script type="text/javascript"&gt; $(function() { $('OL').delegate("li","load",function(){ $(this).css('color','red'); }); }); &lt;/script&gt; </code></pre> <p>This works for all elements loaded <em>afer</em> the first. So I would need some extra code but it <em>works</em>.</p> <p>Does anybody have any better solution? Any way to do a "live" for non events?</p> <p>Thanks!</p> <p><strong>EDIT</strong> Regarding the "red" example in the code... the changes I need to do are those amongst many others:</p> <pre><code>('BODY').delegate(".mcs_container","load",function(){ $(this).mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","no","no",0); }).trigger('load'); </code></pre> <p>So I think only triggering a function will work.</p> <p><strong>EDIT 2</strong> I've created a working example here: <a href="http://jsfiddle.net/THHNS/5/" rel="nofollow">http://jsfiddle.net/THHNS/5/</a> What I'm trying to accomplish is to be able to avoid the extra trigger <code>$('LI').trigger('focus');</code></p> <p><strong>EDIT 3</strong> I was using delegate when ON should be enough and better. The updated example: <a href="http://jsfiddle.net/THHNS/26/" rel="nofollow">http://jsfiddle.net/THHNS/26/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload