[jQuery] Is there a way to use this function without clicking the link twice?
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal>Strange question, I know…and perhaps stranger coding,
but…<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>I’m trying to trigger a function with a text link and
it works, but with the<o:p></o:p>
<p class=MsoNormal>function coded as is, the link has to be clicked twice.<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>I’d like to keep the function coded starting with “function
ajaxCreateStoryTitle() {“<o:p></o:p>
<p class=MsoNormal>rather than “(document).ready(function() {“ for code
organization purposes, but using<o:p></o:p>
<p class=MsoNormal>“function… causes the text link to have to be
clicked twice to fully execute the function.<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>All this has to do with a method I’m trying to
organize a lot of code that’s needed to<o:p></o:p>
<p class=MsoNormal>create an ajax-driven, single-interface page.<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>Anyway…here’s the trigger link:<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><a id=”createStoryTitleLink” class=”link”
onClick=”fnCreateStoryTitle();”>create title</a><o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>Clicking that link fire this function:<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>function fnCreateStoryTitle() { ajaxCreateStoryTitle();
}<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>The function, “ajaxCreateStoryTitle();” starts
like this:<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>-------------------<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>function ajaxCreateStoryTitle() {<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal> $(‘#createStoryTitleLink’).click(function()
{<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>
titleValue = $(this).parent().parent().find(‘#createStoryTitleInput)val();<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal> etc…<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>------------------<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>Because of this coding, I have to click the text link above
twice; once to trigger the function<o:p></o:p>
<p class=MsoNormal>and the second time to trigger the $(‘#createStoryTitleLink’).click(function()
{ line.<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>I need the “titleValue” line to obtain the value
of the text input “#createStoryTitleInput”.<o:p></o:p>
<p class=MsoNormal>Perhaps there’s a different way to get that value
other than with the “click” function?<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>There may be a better way to achieve code organization that
what I’m doing, but it’s just<o:p></o:p>
<p class=MsoNormal>my way of evolving my coding style using jQuery and AJAX.<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>Suggestions? Another way to code the function “ajaxCreateStoryTitle()”
and still<o:p></o:p>
<p class=MsoNormal>be able to reference the titleValue in the input “#createStoryTitleInput”
???<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>Thanks for taking time to read through this…<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>Rick<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><i><span style='color:#A6A6A6'>---------------------------------------------------------------------------------------------------------------------------------------<o:p></o:p></span></i>
<p class=MsoNormal><i><span style='color:#A6A6A6'>"It has been my
experience that most bad government is the result of too much government."
- Thomas Jefferson<o:p></o:p></span></i>
<p class=MsoNormal><o:p> </o:p>
</div>
</body>
</html>