-1

Update... 29.8.13 The

$(document).on("click", ".setStamp", function ()

works just fine.

On testing I find that one of the actions within that click block

$('.setStamp').addClass('fake');

no longer works. This 'fake' class is a simple toggle override used...

if ($('.setStamp').is('.fake')) { resize-elements; $('.setStamp').removeClass('fake'); } 
else { $(this).toggleClass('large'); $container.isotope('reLayout'); }

If I set it using:

$(".arrow_in").click(function () { $('.setStamp').addClass('fake'); }

It is fine. Comments?

___end Update

I am using Masonry-Isotope as a language dictionary interface where tiles are the first layer word definition. Simple eg: tile-a is the word 'test' with a synonym link 'exam'. Clicking exam loads a new definition in a corner-stamp (div float:right) = "A set of questions evaluating [link]skill[/link]".

Clicking the sub-link 'skill' uses the same class trigger as the top-level link 'exam' but... it fails to load.

Example here:http://www.buddhamind.info/br/innerLink.htm

CODE: 

<link rel="stylesheet" href="style.css" />
<script src="jquery.min.js"></script>
<script src="jquery.isotope.min.js"></script>

<div id="container" class="clickable clearfix">
<div id="stamp" class="corner-stamp"><BR><center>tile<BR>
    <span style='background-color:black;color:white;cursor:pointer'>&nbsp;link&nbsp;</span>
    <BR>data<BR><BR>seen<BR>here</center></div>

<div class="element a" data-pali="Janaka-kamma" data-category="a">
    <div class="number">180</div>
    <div class="name"><button id=LINK class=setStamp>LINK</button></div>
</div>
</div>

<script>
$(".setStamp").click(function () { // click tile links..... MANY of these
    $("#stamp").load($('#'+$(this).attr("id")).html()+'.htm'); // load file ID.htm
        $('.setStamp').addClass('fake'); // fake class to stop 'large' resize
    $('.corner-stamp').removeClass('noStamp'); // show stamp
    $('#closeStamp').addClass('stampOn'); // stamp avoided by tiles
        $('.corner-stamp').addClass('corner_wide'); // widen stamp
        $('.corner-stamp').removeClass('corner_content');
        $('.arrow_in').addClass('arrow_vis'); // show arrow_in.png
        $('.arrow_out').removeClass('arrow_vis'); // hide arrow_out.png
        $container.isotope('reLayout'); });
</script>

Two questions: Can it work? What will make it work?

I hope all this makes sense.

Arfa
  • 105
  • 9

1 Answers1

0

To also bind jQuery events on things that are loaded in programatically (with .load for example), use .on(), as explained in this answer. So in your case:

$(document).on("click", ".setStamp", function(){ ... });

Update

If I understand correctly, the .setStamp from which the class fake is not added is loaded in with the .load() function. If I understand this correctly, I presume the $('.setStamp').addClass('fake'); isn't being run on that element because the $("#stamp").load( ... ); hasn't finished loading the content. You could however put the .addClass() code in the complete-function of the .load(), like so:

$("#stamp").load($('#'+$(this).attr("id")).html()+'.htm', function(){
   $('.setStamp').addClass('fake');
});

If the other code after the .addClass('fake') is also applied to stuff that's loaded from the .load() , I strongly advise you to put the complete-function as well. If you don't, it might load some times if the connection is very fast (like running locally), but online or if a user has a bad ping it might take much longer to load.

Community
  • 1
  • 1
jdepypere
  • 3,453
  • 6
  • 54
  • 84
  • simply using .on in place of .bind or .click won't make it delegate the event. – Kevin B Aug 26 '13 at 22:30
  • How I understood his question was that the classes get loaded via `.load()`, so won't `.on()` make these links 'work' as well? – jdepypere Aug 26 '13 at 22:31
  • Yes, they get loaded, but `.on('click', function` is exactly identical to `.click(function`, it won't target items that don't exist yet. – Kevin B Aug 26 '13 at 22:32
  • According to [this](http://stackoverflow.com/a/13927958/1319187) answer `.on()` does do something different – jdepypere Aug 26 '13 at 22:34
  • 1
    Look very closely at the syntax in that answer vs the syntax in your answer. They are very different and perform two different tasks. – Kevin B Aug 26 '13 at 22:34
  • .on() = Attach an event handler function for one or more events... thx guys – Arfa Aug 26 '13 at 23:51
  • I tried adding a new 'block' - answer my own question.. so,On testing I find that one of the actions $('.setStamp').addClass('fake'); no longer works. This class is a simple toggle override for $container.delegate( '.element', 'click', function(){ // change size of clicked element if ($('.setStamp').is('.fake')) { $('.setStamp').removeClass('fake'); } else { $(this).toggleClass('large'); $container.isotope('reLayout'); } // zx; if-else stops resize on click-setting stamp text }); Any comments? – Arfa Aug 27 '13 at 00:33
  • @Arfa: please update your question with the necessary code, write **Update** before it or so to make it clear it is an additional error. – jdepypere Aug 27 '13 at 11:14
  • I updated my answer again @Arfa, hope I understood you correctly. – jdepypere Aug 29 '13 at 00:24
  • @arbitter - no, as per my orig ex. the fake class is added with all the other class adjusts. Just that when I use the $(document).on("click", ".setStamp", function(){...} it doesn't work. I have reset an instance of the original $(".setStamp").click(function () {...} just for the fake class. That works OK but I don't see why. There is only the one load() call using a single ID but I appreciate your suggestion as, yes, I develop local. I very much appreciate your time but unless you see a problem resetting the orig. just for fake class I am happy. Still, if you have an easy explaination then OK – Arfa Aug 30 '13 at 22:05