CODEWITHSUNDEEP
jqueryformsjquery-mobilebutton
Jaya Mayu
Jaya Mayu

Reputation: 17257

jQuery Mobile Dynamically appended forms inside Accordion

I have a accordion collapsible done using jQuery Mobile as shown in the image below. Each accordion has dynamically appended 2 textarea and a button. enter image description here

I have set the click event for the button as below.

$('.SaveProj').bind('click',function(){
 var mytest = $('#externalNotesMon').val();
 alert(mytest);
});

But the value shown in the alert is the value from the first accordion, not the one from the accordion it was clicked from.

Can someone please enlighten me on this issue?

Please find my code as below

var projectListStr = "<div data-role='collapsible-set' data-theme='c' data-content-theme='d' id='collabsibleProjectList' data-inset='false'>";
        $.each(projectList,function(index, value){
                LineOneprojectListStr = "<br/><p class='listP2'><strong>Aktivitet </strong>: "+CheckNullToEmptyString(this.ActivityName)+"</p>";
                LineOneprojectListStr +=  "<br/><p class='listP3'><strong>Händelse/Verksamhet</strong>: "+CheckNullToEmptyString(this.EventName)+"</p>";
                projectListStr += "<div data-role='collapsible' class='myset'>";
                projectListStr += "<h3>"+this.ProjectName+"<span class='ui-li-count'>"+checkNullToZero(this.Days[i].EventTimant2)+"</span>"+LineOneprojectListStr+"</h3>";
                FormStr = "<table align='center'>";
                FormStr += "<tr><th>Hours</th><th>Minutes</th></tr>";
                var TimeStr =  new String((this.Days[i].EventTimant2)).split(".");
                FormStr += "<tr><td><input type='number' name='hoursMon' id='hoursMon' value='"+CheckNullEmptyToZero(TimeStr[0])+"'  /> </td><td><input type='number' name='minsMon' id='minsMon' value='"+CheckNullEmptyToZero(TimeStr[0])+"'  /></td></tr>";
                FormStr += "</table>";
                FormStr += "<div data-role='fieldcontain' >";
                FormStr += "<label for='externalNotesMon'>Fakturatext</label>";
                FormStr += "<textarea name='textarea' id='externalNotesMon' style='min-height:120px'>"+CheckNullToEmptyString(this.Days[i].Editext)+"</textarea>";
                FormStr += "</div>";
                FormStr += "<div data-role='fieldcontain'>";
                FormStr += "<label for='internalNotesMon'>Intern Text</label>";
                FormStr += "<textarea name='textarea' id='internalNotesMon' style='min-height:120px' >"+CheckNullToEmptyString(this.Days[i].Edit)+"</textarea>";
                FormStr += "</div>";
                FormStr += " <a href='#' data-icon='check'  class='SaveProj' data-theme='g' data-role='button'>Spara</a>"
                projectListStr +=FormStr;
            projectListStr +=  "</div>";

        });
projectListStr +=  "</div>";
$('#ProjectList').html(projectListStr);
$('#home2').trigger('create');

$('.SaveProj').bind('click',function(){
  var mytest = $('#externalNotesMon').val();
  alert(mytest);
});

Upvotes: 0

Views: 578

Answers (2)

Gajotres
Gajotres

Reputation: 57309

This is a correct behavior because you have 2 textarea's with an id externalNotesMon.

On click event button will retrieve first DOM occurrence of an id #externalNotesMon, and that is a first textarea.

To fix this use something like this:

$('.SaveProj').bind('click',function(){
    // This will look at buttons previous element and inside search for #externalNotesMon
    var mytest = $(this).prev().find('#externalNotesMon').val();
    alert(mytest);
});

Upvotes: 1

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

try jQuery.on() that will work also on dynamically added DOM.

$('.SaveProj').on('click',function(){
 var mytest = $('#externalNotesMon').val();
 alert(mytest);
});

Upvotes: 0

Related Questions