Unable to bind event

Question

I am trying to bind an onchange event to a textarea, but this isnt working

$('#Que_dlist_ctl0' + sectionid + '_Inner_dlist tr:nth-child(' + (i + 1) + ')  
#Que_dlist_ctl0' + sectionid + '_Inner_dlist_ctl0' + i + '_txtsuggest')
.addClass("clTxt_" + i)
.bind("change",function(){"Validate(this);"});

In the rendered html, I can see the 'class' added as desired, but not the event. Also tried .attr instead of bind.

$('#Que_dlist_ctl0' + sectionid + '_Inner_dlist tr:nth-child(' + (i + 1) + ')  
    #Que_dlist_ctl0' + sectionid + '_Inner_dlist_ctl0' + i + '_txtsuggest')
    .addClass("clTxt_" + i)
    .attr("onchange","Validate(this);"});

It doesnt work in firefox, ie and chrome.

The rows in table and the controls, all are dynamically generated, and hence that weird id selector

<textarea class="clTxt_0" name="Que_dlist$ctl00$Inner_dlist$ctl00$txtsuggest"  
rows="3" cols="20" id="Que_dlist_ctl00_Inner_dlist_ctl00_txtsuggest"  
style="width:300px;"></textarea>

Answer 1

If you write $(selector).bind("change",function(){}); or $(selector).change(function(){});, this is going to bind only to those textareas which are already present in the DOM when the event gets bound to the textarea.

Since your rows are generated dynamically, you can just add a class to the textarea while generating

<textarea class="gridTextArea" class="clTxt_0" 
 name="Que_dlist$ctl00$Inner_dlist$ctl00$txtsuggest" rows="3" cols="20" 
 id="Que_dlist_ctl00_Inner_dlist_ctl00_txtsuggest"  style="width:300px;" >
 </textarea>

and bind it as below which will bind to all the newly created textareas with in the dynamically created rows.

$(document).on("change",".gridTextArea",function(){
//your logic goes here
 });

Hope this helps :)

Answer 2

Use:

.change(function(){
   Validate(this);
});