jQuery Mobile动态地在手风琴内附加表格

Question

我有一个使用jQuery Mobile的可折叠手风琴，如下图所示。每个手风琴都动态地附加了2个textarea和一个按钮。

我已经设置了按钮的点击事件如下。

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

但是，警报中显示的值是第一个手风琴的值，而不是从它被点击的手风琴的值。

有人可以在这个问题上给我启发吗？

请找我的代码如下

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); 
}); 

Answer 1

这是一个正确的行为，因为你有2个文本区域与一个ID externalNotesMon。

单击事件按钮将检索ID为#externalNotesMon的第一个DOM事件，并且这是第一个textarea。

为了解决这个问题，可以这么用：

$('.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); 
}); 

Answer 2

尝试jQuery.on()，将工作也动态地添加DOM。

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