0

下の画像に示すように、jQueryMobileを使用してアコーディオンを折りたたみ可能にします。各アコーディオンには、2つのテキストエリアとボタンが動的に追加されています。 ここに画像の説明を入力してください

ボタンのクリックイベントを以下のように設定しました。

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

2 に答える 2

1

これは正しい動作です。IDがexternalNotesMonのテキストエリアが2つあるからです。

クリックすると、イベントボタンはID #externalNotesMonの最初のDOMオカレンスを取得します。これは、最初のテキストエリアです。

これを修正するには、次のようなものを使用します。

$('.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);
});
于 2013-02-26T10:31:21.733 に答える
0

jQuery.on()動的に追加されたDOMでも機能するようにしてください。

$('.SaveProj').on('click',function(){
 var mytest = $('#externalNotesMon').val();
 alert(mytest);
});
于 2013-02-26T04:57:48.230 に答える