How do I access ID or class in new AJAX loaded code

Robert_Rohrer · January 30, 2015, 8:21am

<!-- ---------------------------------- --->
<!-- Script to Run More/Less Show/Hide  --->
<!-- ---------------------------------- --->
<script>
$(document).ready(function(){
	 $("#lessnarr").click(function(){
    $(this).hide();
    $("#morenarr").show();

  });
  $("#morenarr").click(function(){
    $("#lessnarr").show();
    $("#morenarr").hide();

  });

  $("#lesstext").click(function(){
    $(this).hide();
    $("#moretext").show();
  });
  $("#moretext").click(function(){
    $("#lesstext").show();
    $("#moretext").hide();
  });
  
  
  
});
</script>
<style>

.morelessnarr,
.morelesstext {
  color:green;opacity:.5;font-family:arial, helvetica,sans-serif;font-weight:900;font-size:16pt;padding: 2px 3px;margin-top:-20px;text-shadow:.05em .05em .1em gray;margin-
left:500px;
}
.morelesstext {
  margin-left:200px; /* override */
}
#lessnarr,
#lesstext  {
  display:none;
}

</style>

This needs to access and run material inserted with AJAX that has this in it;

     <div  id="morenarr" class="morelessnarr">More Narrative</div><div id="lessnarr">
	<p>The planning and decisions that brought more about more lake side parks, more recreational areas and a restored Lake Okabena, were not all done at once, not all done at one meeting. The decisions took time. This article is just a part of the story.</p>
	
				<p>There was just one park, it had been called "City Park" and that is what you see on many old post cards from that era. It was also, sometimes, called "Tourist Park".</P>
				
				 <p>"City Park" was where the national Chautauqua movement held their Summer performances.&nbsp; The result of that was that 
				 many people visited Worthington's "City Park" to go to the Summer Chautauqua performances&nbsp; 
				 and they referred to it as "Chautauqua Park". The name "Chautauqua Park" made more sense to more people than "City Park".&nbsp; 
				 The "Chautauqua" name stuck in peoples minds and and it is how we know the park now except when we look at those old post cards and wonder, "where was City Park".</p>
				
				<p>In 1930 there was no road around Lake Okabena.&nbsp; So, there could not be any other parks, or beaches, 
				along the lake shore, accessible by car along,&nbsp; until they built a road around the lake.</p>

				<p>Development of other parks around the lake was going to require filling in low areas, like "City Pasture".</p>				
				
				<p>It was obvious to leaders that there needed to be some restoration of Lake Okabena if it was to be the Summer lake recreation draw for SW MN that they wanted it to be.</p>
				
				<p>More than likely this thinking was brewing in the late 1920's, given that decisions were made to test the use of a specific tool in 1931 ( the experimental dredge ).&nbsp; This longing for more lakefront led into the long range plans to develop more nice lakefront with lake side parks.</p>

				 <span class="morelessnarr">Less narrative</span></div>

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

Paul_Wilkins · January 30, 2015, 8:56am

You can use the .on(event, selector, handler) method to achieve that.

Robert_Rohrer · January 31, 2015, 12:08am

I tried adding the .on process using the W3C top code as example. My use does not work. I must be doing something wrong. The CSS finds the ID’s and classes.
←

$(document).ready(function(){
$(“p”).on(“click”,function(){
alert(“The paragraph was clicked.”);
});

$(“#lessnarr”).on(“click”,(function(){
$(“#lessnarr”).hide();
$(“#morenarr”).show();

});
$(“#morenarr”).on(“click”,(function(){
$(“#lessnarr”).show();
$(“#morenarr”).hide();

});

$(“#lesstext”).on(“click”,(function(){
$(this).hide();
$(“#moretext”).show();
});
$(“#moretext”).on(“click”,(function(){
$(“#lesstext”).show();
$(“#moretext”).hide();
});

});

→

Paul_Wilkins · January 31, 2015, 1:05am

Using selector.on() results in only those matching elements that currently exist having the event attached.

What you are wanting to achieve instead used to be done using the .live() method, which has since been replaced with using .on() and a selector within, such as:

$( document ).on( events, selector, data, handler );

By attaching it to the document, it can keep on checking whenever new elements are added to the page that match the given selector.

Robert_Rohrer · January 31, 2015, 2:19am

This sounds like the (document).on coding might be necessary at the beginning of the document and then another set of coding for the specific event [which here is a on-click event on a specific ID]

Or does one set of re-arranged code using the (document).on layout work both in general setup and specific action?

I am trying to follow the jQuery .live example and would think my own code should look like this;
(document).on(“click”, #lessnarr, function(){
$(this).hide();
$(“morenarr”).show();
});

The coding used to be;
$(“#lessnarr”).click(function(){
$(this).hide();
$(“#morenarr”).show();

Paul_Wilkins · January 31, 2015, 2:45am

Don’t forget the $ in front of (document), and place #lessnarr in quotes, and be careful with morenarr needing a #, you should be right.

Robert_Rohrer · February 1, 2015, 12:57am

I am still struggling with this. I have watched some video tutorials on this and feel that I must be close;

I know a version of this without the modifications to “.on” to actuate the connection between what is originally loaded in the DOM and what is added later via AJAX works.

So, a syntax change and re-arrangement of parameters must be all that is required.

This is the original script;

<script>
  $(document).ready(function(){
   <!-- Handle the Narratives   -->
	$("#lessnarr").click(function(){
    $(this).hide();
    $("#morenarr").show();
    });
    
    $("#morenarr").click(function(){
    $("#lessnarr").show();
    $("#morenarr").hide();
    });
    
    <!-- Handle the Text -->
    $("#lesstext").click(function(){
    $(this).hide();
    $("#moretext").show();
    });
    $("#moretext").click(function(){
    $("#lesstext").show();
    $("#moretext").hide();
    });
  
});
</script>

This is the modified script to add “.on”;

<!-- ---------------------------------- --->
<!-- Script to Run More/Less Show/Hide  --->
<!-- ---------------------------------- --->
<script>

$(document).ready(function(){
	
   <!-- Handle the Narratives   -->
    $(document).on("click", "#lessnarr", (function(){
    $(this).hide();
    $("#morenarr").show();
    });
  
    $(document).on("click", "#morenarr", (function(){
    $(this).show();
    $("#morenarr").hide();
    });
    
    <!-- Handle the Text -->
    $(document).on("click","lesstext",(function(){
    $(this).hide();
    $("#moretext").show();
    });
    
    $(document).on("click","moretext",(function(){
    $(this).show();
    $("#moretext").hide();
    });
 
});
</script>

The HTML that I am working on is not public yet. but is at http://www.wgtn.net/Okabena/dredge/articles/panels/1930_02_20_editorial_beautifying_worthington.htm

The HTML ID’s that AJAX is loading is at;

I am using jQuery 1.9. I had wondered if that might be the problem. But the barrier to using “.on”, I think, is at version 1.7

If it were not for the fact that the Input Form jQuery functions ok, I would conclude that my use of ID’s and logic was in error. But since that works. It has to be something that AJAX insertion sees different. And that would lead to the binding process.

Is it possible that two sets of statements are needed? One at the document level to bind certain events, and another set to actually do something with the events? I looked for this with Google, but whatever I saw was just one set of statements.

Where did I go off the road?

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

PaulOB · February 1, 2015, 11:58am

Robert_Rohrer:

<!-- Handle the Text –>
$(document).on(“click”,“lesstext”,(function(){
$(this).hide();
$(“#moretext”).show();
});
$(document).on("click","moretext",(function(){
$(this).show();
$("#moretext").hide();
});

Was that just a typo in here or should it be #lesstext and #moretext ?

And should it be $(“#lesstext”).hide(); in the last function?

You also have an extra bracket before function. It should be like this I think.

$(document).ready(function(){
    
   <!-- Handle the Narratives   -->
    $(document).on("click", "#lessnarr", function(){
    $(this).hide();
    $("#morenarr").show();
    });
  
    $(document).on("click", "#morenarr", function(){
    $(this).show();
    $("#morenarr").hide();
    });
    
    <!-- Handle the Text -->
    $(document).on("click","#lesstext",function(){
    $(this).hide();
    $("#moretext").show();
    });
    
    $(document).on("click","#moretext",function(){
    $(this).show();
    $("#lesstext").hide();
    });
 
});

system · May 3, 2015, 7:00pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.