Jeff Stevens
08/26/2022, 2:02 PM<cfoutput>
...
<cfloop>
<cfset FormElementPK = rc.formElements.getRow(i)["FormElementsPK"]>
<script>
//Create a listener for the question text editor to check for errors on blur
var #toScript(FormElementPK, "jsFormElementPK")#;
var inputFieldId = document.getElementById("##question" + jsFormElementPK + "TextEditor");
$(inputFieldId).on('blur', function(e) {
alert("I am a test message!");
checkQuestionTextForErrors(inputFieldId);
});
</script>
...
</cfloop>
...
</cfoutput>
Its intended effect is to dynamically generate Ids and then create Jquery event listeners for those Ids. The problem I have is that the event listeners work only when I hardcode the Ids (replace inputFieldId with "##question1TextEditor" etc). I'm wondering, why does this not create working event listeners when I dynamically generate the Ids the way code above does?websolete
08/26/2022, 2:14 PMwebsolete
08/26/2022, 2:14 PMJeff Stevens
08/26/2022, 2:15 PMwebsolete
08/26/2022, 2:16 PMJeff Stevens
08/26/2022, 2:16 PMwebsolete
08/26/2022, 2:17 PM$(document).ready( your code here )
websolete
08/26/2022, 2:17 PMjakobward
08/26/2022, 2:17 PMjakobward
08/26/2022, 2:17 PMwebsolete
08/26/2022, 2:17 PMwebsolete
08/26/2022, 2:22 PMJeff Stevens
08/26/2022, 2:24 PMwebsolete
08/26/2022, 2:26 PMJeff Stevens
08/26/2022, 2:31 PMgavinbaumanis
08/29/2022, 12:27 AMMatt Jones
08/29/2022, 4:42 AM$("##question#encodeForJavascript(formElementsPK)#TextEditor").on("blur", function() {
var myChange = $(this);
console.log( "blur happened " + myChange.attr("id") + " is now " + myChange.val() );
});
personally though, I'd drop in a single script, rather than one per input, and would add a class="myFancyElement" to your inputs, for jquery to select off of. So that I can use one selector, while this also still requires the elements to exist in the dom, it doesn't require as much duplication.
$(".myFancyElement").on("blur", function() {
var myChange = $(this);
console.log( "blur happened " + myChange.attr("id") + " is now " + myChange.val() );
});
if your form could change dynamically, then you can also add a class="myFancyForm" to something that wraps the fields and do a similar item as above. Then any item that is in the dom and any item added later with the myFancyElement class will also be able to trigger the on blur.
$(".myFancyForm").on("blur", ".myFancyElement", function() {
var myChange = $(this);
console.log( "blur happened " + myChange.attr("id") + " is now " + myChange.val() );
});