Geek Answers Handbook

JQuery.change () not working in textarea

This is the first time I ask about StackOverflow, but I'm currently deadlocked with some kind of enterprise code that I am creating. It simply won't accept .change () or is bound to keyup. I had no problems before, but today it stops working. Check my code and see if you see anything that might cause the problem.

Sorry for the formatting, I'm new.

var currentContent = "null"; var customeri = ""; var optionsi = ""; var equipmenti = ""; var picturei = ""; $(document).ready(function() { $("#preview").hide(); $("#previewPane").hide(); $("#previewHeading").hide(); $(".uiFonts").click(function() { var clickedID = $(this).attr("id"); if(clickedID !== null) { $("#main").hide(); loadContent(clickedID); } }); $("#Equipment").bind('change keyup', function() { equipmenti = $(this).val(); $("#preview").html('<br /><span class="reg">Customer Info<br /></span>'+customeri+'<br /><br /><span class="reg">Options<br /></span>'+optionsi+'<br /><br /><span class="reg">Equipment<br /></span>'+equipmenti+'<br /><br /><span class="reg">Picture:<br /></span><img src="'+picturei+'" />'); }); }); function loadContent(cID) { $("#main").load(cID + ".html", function() { $("#main").slideDown(1500); $("#preview").fadeIn(1500); $("#previewPane").fadeIn(1500); $("#previewHeading").fadeIn(1500); currentContent = cID; }); }

An .html file containing text fields looks like this:

 <p><span class="reg">Customer Info - Name, Address, Phone, Email</span><br /> <textarea name="Customer Info" class="textAreas inputs" id="Customer"></textarea> <br /> <br /> <span class="reg">Trailer Options</span> <br /> <textarea name="Options" class="inputs textAreas" id="Options"></textarea> <br /> <br /> <span class="reg">Trailer Equipment</span> <br /> <textarea name="Equipment" class="inputs textAreas" id="Equipment"></textarea> <br> <br> <span class="reg">Picture URL</span></p> <input type="text" id="picture" class="inputs"></input>

And I tried to relate them in general, like:

 $(".inputs").change(function() { customeri = $("#Customer").val(); optionsi = $("#Options").val(); //etc
+4
source share
2 answers

When loading an external .html file, jquery cannot access it regularly and apply actions to it. This problem occurs because inside the $ (document) .ready trigger it does not find a link to the identifier found in .html until it is loaded, and it is too late to find it if you call the external .html after the document is ready.

The workaround is to keep .change in a separate jquery function, or just load .html before the document finishes loading.

0
source

The work of FIDDLE . To confirm, I added <div id='test'/> , $("#Equipment").bind('change keyup', function(e) { $('#test').append(e.type); and get the keyup and change as expected.

UPDATE I think your problem is elsewhere, because events both shoot. (Do you know that the change only works after exiting textarea with a different value?)

+1
source

More articles:


All Articles